如何使用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在哪里更改状态

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

5.2在哪里使用状态

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