this.$store显示undefined,打印this也没有$store
在做项目时,遇到使用vuex,$store一直undefined问题,代码导出、引入store发现并没有什么毛病
// ./store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
Vue.use(Vuex);
const modulesFiles = require.context('./modules', true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});
const store = new Vuex.Store({
modules,
getters
});
export default store;
// ./main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
Vue.config.productionTip = false
new Vue({
store: store,
render: h => h(App)
}).$mount('#app')
原因分析:
起初以为是代码问题,后来一想当时下载vuex依赖,没有指定版本直接下载了最新版,或许是版本过新导致的。
解决方案:
更换vuex版本,遇到同样问题的朋友可以试着换下版本,我的对应版本给贴下面啦,做个参考
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuex": "^3.0.1"
},