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

Question

我正在使用 vuex (2.1.1) 并在 vue 单文件组件中工作。但是，为了避免在我的 vue 单文件组件中出现过多的问题，我将一些函数移到了 utils.js 模块中，并将其导入到 vue 文件中。在这个 utils.js 我想读取 vuex 状态。我怎样才能做到这一点？似乎使用 getters 等接近状态是假设您是在 vue 组件内工作，还是不是？

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

我目前的估计是，这根本不是 'the way to go'，因为 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)

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

How to get vuex state from a javascript file (instead of a vue component)

javascript

vue.js

vue-component

vuejs2

vuex