1.下载vuex
npm i vuex@3.6.2
版本太高容易报错
2.新建store目录并新建index.js
3.修改store中的index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
}
})
4.新建状态管理模块（放在store目录）
本处建立tab.js，其实也可直接不用引模块的方式，直接state、getters、mutations、actions，但是我觉得引模块的方式虽然麻烦，但是可以使得项目结构更清晰。写完四大件后export 导出。
export default {
state: {
},
getters:{
},
mutations: {
},
actions: {
}
}
4.填四大项
1. state即我们需要全局使用的状态即数据。
2. getters即相当于一个页面中的computed计算属性，即监听state数据变化的，我们可以在每个页面中用computed来获得state数据，但是更好的方法是用getters，省去了写计算属性。
3. mutations即相当于页面中的method，即修改数据的方法，但是只有通过mutations才能修改states中的数据，所以mutations是必须要的，不能通过直接访问state数据来修改。
4. actions即mutations的强化版，mutations不可异步修改states，但是actions可以做到，所以actions用于异步修改数据
本处在state填入了一个控制侧边栏收缩的变量，getter添加一个用于访问该变量的方法，mutations用于点击取反修改states数据
export default {
state: {
isCollpse:false
},
getters:{
getCollpseValue(state) {
return state.isCollpse
}
},
mutations: {
setCollpse(state) {
state.isCollpse = !state.isCollpse
}
},
actions: {
}
}
5.在main.js引入 store.js
import store from './store'
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
引入的是目录，但是会默认找到index.js
7.在页面中访问使用state
访问引用vuex中state的数据用此格式
$store.getters.yourgettersMethod
8.在页面中访问使用mutations方法操作vuex数据
changeCollpse() {
this.$store.commit('setCollpse')
}
this.$store.commit('yourmutationsMethod')