vuex使用

在开发项目时候常常会遇到多个组件或者页面同时使用一个变量，这就需要组件之间或者页面之间进行传参，使用可能会存在弊端或缺陷，鉴于此类情况，本人尝试使用vuex进行状态管理。
示例场景如下：
在开发后端管理系统时常常会出现以下场景，有侧边栏组件 comp-aside.vue 和顶部组件com-header.vue，要实现在顶部组件的按钮点击控制侧边栏的展开和收起。

1.安装vuex，执行命令 cnpm install vuex@2 --save ，vuex的版本根据个人项目情况而定，否则会出现错误，我的项目配置情况如下。

2.在项目的src同级目录创建store文件夹，里面包含index.js和tab.js，并且在main.js中引入

3.index.js中写入如下代码

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

4.tab.js中写入如下代码

export default{
	state:{
	//定义变量
		isCollapse:true
	},
	mutations:{
		collapseMenu(state){//变量取反方法
			state.isCollapse=!state.isCollapse 
		}
	}
}

5.compaside.vue中在计算属性里面加入isCollapse函数，其中this.$store.state是固定写法，tab是页面名，isCollapse是预先定义的变量

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

html的menu组件绑定对应变量

6.com-header.vue按钮上绑定如下点击事件，collapseMenu就是在tab.js中定义的变量取反的方法，this.$store.commit是固定写法，用于vuex执行某个方法

 methods:{
		  turnMenu:function(){
			  this.$store.commit('collapseMenu')
		  }
	  }