vue2 vuex的使用步骤

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')