35-vuex的简介和使用

如果我们有好几个组件，部门组件、员工组件、用户组件等等，他们都拥有一个共同的变量，假如一个组件将这个值进行改变，就得发送信号来让别的组件的值也改变。如果组件多，这样耗费的时间无疑是巨大的。因此我们可以使用vuex，将这个公共的变量提取出来管理。可以将vuex理解成一个存放全局变量的容器。

2、配置vuex
（1）建立store文件夹，vuex虽然是状态管理，但我们习惯上建立store文件夹来存储状态
（2）创建index.js文件
一个目录如果有index.js文件，index.js就表示我们的入口文件，以后我们导入的时候就导入这个目录就行了.
因为导入时/store就相当于/store/index.js，vue将我们后面/index.js省略了，加不加效果都是一个样的
（3）编写index.js

（4）main.js引入index.js

至此，环境搭建完毕

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、使用状态管理器

1、state属性：用来定义组件共享数据

（1）定义共享数据

（2）因为我们已经把store注册到vue实例中了，以后可通过this调取

（3）使用共享数据
组件中使用共享数据 this.$store.state.counter

2、mutations属性：用来定义对共享数据的修改方法 在这里面定义方法，都有一个默认参数 默认参数会将状态对象传递给自定义方法
（1）、定义方法

（2）、组件中调用方法 this.$store.commit('方法名')

（3）mutations中方法有一个参数的情况

（4）如果有多个参数，就包装成一个对象进行传参

3、getters属性，作用：用来书写对共享数据进行计算的方法 相当于组件中的computed，缓存结果，在这里定义方法，都有一个默认参数，默认参数会将状态对象传递给自定义方法
如果用到counter的平方，每个组件都得进行计算一次{{this.$store.state.counter * this.$store.state.counter}}，很麻烦
计算属性的好处：有缓存：只计算一次
使用：this.$store.getters.方法名