(vue 구성 요소 대신) javascript 파일에서 vuex 상태를 가져오는 방법

(vue 구성 요소 대신) javascript 파일에서 vuex 상태를 가져오는 방법

나는 vuex(2.1.1)로 작업하고 있으며 vue 단일 파일 구성 요소 내에서 작업을 수행한다.그러나 vue 단일 파일 구성 요소의 너무 많은 순항을 방지하기 위해 일부 기능을utils.jsvue 파일로 가져오는 모듈.이 점에서.utils.js나는 vuex 상태를 읽고 싶다.내가 어떻게 그럴 수 있을까?Getters 등으로 주(州)에 접근하는 것처럼 보이므로 귀하가 Vue 구성 요소 내에서 작업하고 있다고 가정하는 것인가, 아니면 그렇지 않은가?

하려고 했다.import state from '../store/modules/myvuexmodule'그리고 나서 을 참조하라.state.mystateproperty그러나 vue-devtools에서 상태 속성이 적절한 값을 가지는 반면, 항상 '정의되지 않음'을 제공한다.

이 시점에서 나의 추정은 js 파일 내의 state.property 값이 반응하지 않고 따라서 업데이트나 다른 것을 하지 않을 것이기 때문에 이것이 단순히 '방법'이 아니라는 것이다. 그러나 누군가가 내가 틀렸다는 것을 확인/증명할 수 있을 것이다.

외부 js파일의 객체로 스토어에 접속할 수 있으며, 상태변화를 증명하기 위한 테스트도 추가했다.

다음은 외부 js 파일:

import { store } from '../store/store'

export function getAuth () {
  return store.state.authorization.AUTH_STATE
}

상태 모듈:

import * as NameSpace from '../NameSpace'
/*
   Import everything in NameSpace.js as an object.
   call that object NameSpace.
   NameSpace exports const strings.
*/

import { ParseService } from '../../Services/parse'

const state = {
  [NameSpace.AUTH_STATE]: {
    auth: {},
    error: null
  }
}

const getters = {
  [NameSpace.AUTH_GETTER]: state => {
    return state[NameSpace.AUTH_STATE]
  }
}

const mutations = {
  [NameSpace.AUTH_MUTATION]: (state, payload) => {
    state[NameSpace.AUTH_STATE] = payload
  }
}

const actions = {
  [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => {
    ParseService.login(payload.username, payload.password)
      .then((user) => {
        commit(NameSpace.AUTH_MUTATION, {auth: user, error: null})
      })
      .catch((error) => {
        commit(NameSpace.AUTH_MUTATION, {auth: [], error: error})
      })
  }

export default {
  state,
  getters,
  mutations,
  actions
}

스토어:

import Vue from 'vue'
import Vuex from 'vuex'
import authorization from './modules/authorization'

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: {         
    authorization    
  }                  
})                   

지금까지 내가 한 일은 js파일을 만드는 것 뿐인데, js파일을 내보내는 것은 그 함수를 반환하는 함수를 내보내는 것이다.AUTH_STATE의 재산.authorization국가 변수

테스트용 구성 요소:

<template lang="html">
    <label class="login-label" for="username">Username
        <input class="login-input-field" type="text" name="username" v-model="username">
    </label>
    <label class="login-label" for="password" style="margin-top">Password
         <input class="login-input-field" type="password" name="username" v-model="password">
    </label>
    <button class="login-submit-btn primary-green-bg" type="button" @click="login(username, password)">Login</button>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import * as NameSpace from '../../store/NameSpace'
import { getAuth } from '../../Services/test'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    ...mapGetters({
      authStateObject: NameSpace.AUTH_GETTER
    }),
    authState () {
      return this.authStateObject.auth
    },
    authError () {
      return this.authStateObject.error
    }
  },
  watch: {
    authError () {
        console.log('watch: ', getAuth()) // ------------------------- [3]
      }
    },
    authState () {
      if (this.authState.sessionToken) {
        console.log('watch: ', getAuth()) // ------------------------- [2]
      }
    },
  methods: {
    ...mapActions({
      authorize: NameSpace.ASYNC_AUTH_ACTION
    }),
    login (username, password) {
      this.authorize({username, password})
      console.log(getAuth())             // ---------------------------[1]
    }
  }
}
</script>

버튼에서 콘솔에 기본 상태가 로그온됨을 누르십시오.내 경우 동작으로 인해 api 호출이 발생하여 사용자 이름 - 암호 조합에 레코드가 있으면 상태가 변경된다.

성공 사례로 인해 콘솔을 다음 위치에 표시됨authStatewatch, 수입된 기능은 국가에 대한 변경사항을 인쇄할 수 있다.

마찬가지로, 실패 사례에서는,authError국가에 대한 변화를 보여줄 것이다.

Javascript 파일에서 돌연변이에 액세스하는 방법에 대해 궁금한 사람은 다음 작업을 수행하십시오.

import store from './store'
store.commit('mutation_name', mutation_argument);

혹은 행동의 경우,

store.dispatch('action_name', action_argument)

import store from './store'

그 이상

store.commit('mutation_name', mutation_argument)

만약 당신이 js파일을 사용한다면

다음과 같은 액션에 액세스할 수도 있다.

import store from './store'
store.dispatch('action_name', action_argument)

참조URL: https://stackoverflow.com/questions/41534412/how-to-get-vuex-state-from-a-javascript-file-instead-of-a-vue-component