如何使用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 = false
 
new 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
    }
  },