如何使用vuex

1.安装vuex

2.在store文件夹内写index.js

此处tab是自定义的文件

import Vue from "vue"
import Vuex from "vuex"
import tab from "./tab"Vue.use(Vuex)export default new Vuex.Store({modules:{tab}
})

3.在store文件夹内写tab.js(自定义的操作

export default {state: {isCollapse: false, //控制菜单展开或收起},mutations: {//修改菜单展开收起的方法collapseMenu(state) {state.isCollapse=!state.isCollapse},},
};

4.在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"Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App),
}).$mount('#app')

5.具体在组件内调用mutation修改状态

5.1在哪里更改状态

        <!-- 点击控制左侧菜单折叠或展开 --><el-button @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>

  methods:{handleMenu(){this.$store.commit("collapseMenu")}

5.2在哪里使用状态

  <el-menu:collapse="isCollapse">

  computed: {isCollapse(){return this.$store.state.tab.isCollapse}},