状态管理插件vuex

概念:

专门在Vue中实现集中式状态(数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。

作用：

如果我们使用全局总线要让所有的组件进行修改就会引出这么多条线：

如果使用vuex，这个x就不属于任何组件

什么时候使用Vuex——————共享

1.多个组件依赖于同一状态

⒉.来自不同组件的行为需要变更同一状态

vuex工作原理：

如果不发送ajax请求可以忽略actions这条线，直接去mutations，actions中放业务逻辑，有判断的时候进行操作

引入的坑

映入会提前，str2会在100和200之前输出

1.我们应该在main.js中引入store

2.在store中的index中引入vuex

错误的引入方式

我们vuex和store在同一个文件进行引入！！！这么做是错误的，因为第十行一写，第十行里面的代码就执行完了，也就是下面这些代码被执行完了：

但是在执行当中创建了store实例，但是我们还没有执行下面这个代码

会造成顺序错误

---

不要忘记将store配置到vue中

---

2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据:$store.dispatch('action中的方法名' ,数据)或$store.commit( 'mutations中的方法名',数据)

写一个加的案例

组件中

store中

1.mutation中只进行加减，不要放任何业务逻辑。

2.context是一个迷你版的store，commit函数就在这个上下文对象里，提交给后面的函数运行

如果业务逻辑很简单，没有判断等等，那么我们就不需要dispath，直接commit！

那么我们可以将下面红色框的东西删除！！

如果业务逻辑很多可以这样连环使用

---

注意点

1：不要直接在action里面操作state里面的数据

这么写虽然会实现效果，但是开发者工具失效了，因为通过图片我们可以知道我们的开发者工具是跟mutations直接对话的！！

2.可不可以不把逻辑写在actions里面，直接写在组件的方法里面呢？

如果逻辑很大，比如说发票真伪判断。假如说我们写在方法里面，我们所有的组件自身都需要一个真伪判断，如果我们抽象到actions里面，那么就只需要一个判断方法，提高复用性。

---

getters配置项

1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

2.在store.js中追加getters配置

3.组件中读取数据:$store.getters.bigSum

---

mapSate 与map.Getters

1.借助mapState生成计算属性,从state中读取数据

我们的$store.state.sum 有点长，如果我们只需要显示sum就能代表这一堆东西那么我们该怎么办？

计算属性可以解决这个问题：

这里我们的he就可以代表我们的$store.state.sum，那如果有一堆这样的东西，是不是我们需要把我们所有的都配置成计算属性呢？

我们就需要使用到我们的mapSate

红色框里面的东西等价于外面粉色框的计算属性。

如果计算属性名和我们state中的名字是一样的，那么我们可以写成简写形式：

千万不能省略引号！！

如果没有引号就是sum：sum，就会导致后面的解析错误！！！因为没有后面那个sum变量，前面能省略引号是因为我们的js中的简写，所以我们简写的时候必须要加上引号

2.mapGetters

引入

例子

---

mapActions与mapMutations

mapMutations使用：借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)

修改第一个地方，这个地方的参数一定不能省去，不加参数就会报数。

上面红色框代码等价于绿色框代码

mapActions

使用的地方记得传入参数

---

多组件共享数据

向state里面加数据

1.设置一个点击事件

我们存数据可以直接走mutations这条线！！

2.配置mutations里面的方法，在state里面配置一个列表，是可以共享的属性

3.在person的methods中放入add点击事件的方法，然后关联到mutations里面的方法ADD_PERSON,名字不要错！

---

vuex的模块化编码

1.目的:让代码更好维护，让多种数据分类更加明确。

2.修改store.js

3.开启命名空间后，组件中读取state数据:

4.开启命名空间后，组件中读取getters数据:

5.开启命名空间后,组件中调用dispatch

6.开启命名空间后,组件中调用commit