如何从 javascript 文件（而不是 vue 组件）获取 vuex 状态

Question

我正在使用 vuex (2.1.1) 并在 vue 单文件组件中工作。但是，为了避免我的 vue 单文件组件中出现太多杂乱无章的内容，我将一些函数移到了 utils.js 模块，我将其导入到 vue 文件中。在这个utils.js我想读一下vuex的状态。我怎样才能做到这一点？由于似乎使用 getter 等接近状态，因此假设您是在 vue 组件中工作，或者不是？

我尝试 import state from '../store/modules/myvuexmodule' 然后引用 state.mystateproperty 但它总是给出“未定义”，而在 vue-devtools 中我可以看到 state 属性确实具有正确的值。

我在这一点上的估计是，这根本不是“要走的路”，因为 js 文件中的 state.property 值不会是反应性的，因此不会更新或其他什么，但也许有人可以确认/证明我错了。

Answer 1

可以在外部js文件中作为对象访问store，我还加了一个测试来演示状态的变化。

这里是外部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 文件，该文件导出一个函数，该函数返回 authorization 状态变量的 AUTH_STATE 属性。

用于测试的组件：

<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 调用，如果用户名 - 密码组合有记录，则会导致状态更改。

一个成功案例导致在authState手表中显示控制台，导入的函数可以打印对状态所做的更改。

同样，在失败的情况下，authError 上的手表将显示对状态所做的更改

Answer 2

对于想知道如何从 javascript 文件中访问突变的任何人，您可以执行以下操作：

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

或者对于动作，

store.dispatch('action_name', action_argument)

Answer 3

import store from './store'

比

store.commit('mutation_name', mutation_argument)

如果你使用js文件

Answer 4

您还可以访问以下操作：

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