Nuxt2项目Js文件使用Vuex

背景

当前项目是Nuxt2框架，建立了Vuex仓库。通过返回一个函数的形式，建立Vuex

代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () =>
	new Vuex.Store({
		state: {
			name: 'abc'
		},
		mutations: {
			setName(state, data) {
				state.name = data
			}
		}
	})
export default store

问题

在单独的js文件中使用该store

一开始做法：因为返回一个方法，所以使用vuex的时候也要用store()的方式调用，结果出错，name永远都是初始值。原因是每次调用store()都会执行一次new Vuex.Store()，因此每次得到的都是一个新的store，导致name用于都是初始值

import store from '@store'
const name = store().state.name

解决

通过nuxt的上下文来提供store对象，该对象被nuxt框架处理后放入到上下文中，并且始终为同一个store

this.$nuxt.context可以获取到nuxt全局上下文

//js文件
export const log = (context) => {
    const store = context.store
    console.log(store.state.name)
}

//vue文件
methods: {
    fn() {
        this.$store.commit('setName', 12345)
        log(this.$nuxt.context)
    }
}