Vuex遇到的小问题
问题描述:在main.js中已经全局注入Vue.use(Vuex)且能打印出相关信息,但是在页面中就是调用不了,也打印不了。
相关调用代码如下:
main.js中
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from "./router";
import store from "./store";
import http from 'axios';
import '../api/mock.js'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$http = http
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
store中:
export default {
state: {
isCollapse: false
},
mutations: {
collapseMenu(state) {
state.isCollapse = !state.isCollapse
}
}
}
相关页面调用的两个方法:
handleMenu () {
return this.$store.commit('collapseMenu')
isCollapse () {
return this.$store.state.tab.isCollapse
}
我检查了所有的问题,最后定位到版本问题,之前一直用vuex4.0版本,降到vuex3.0版本问题得以解决,可以实现组件之间的相互通信