20、vuex基础及使用

$store 中的 state 中存储的就是我们的数据源

存放组件之间需要<b><font color="#c41230">共享的公共状态</font></b>

尽量通过 mutations 中的方法修改这些数据，不要直接修改

直接使用 state 在视图中渲染

这个属性中<b><font color="#c41230">存储</font></b>的都是<b><font color="#f1753f">用来更改 state 中的数据</font></b>的<font color="#c41230" style="font-weight: bold;">同步</font><font color="#c41230"><b>方法</b></font>

这些方法都至少有一个参数，最多两个<br>

1、第一个参数是 vuex 默认传的 state（数据源）

2、第二个参数 是我们通过 commit 调用 mutations 中的对应方法的时候传递的参数

this.$store.commit('mutations中的方法名'，传过去的参数)<br>

这里的函数必须都是同步函数(它是认为约定不是技术规定) 为什么呢？

答

可以对state中的成员加工后传递给外界

什么时候才会选择使用getters<br>

如不需要，第二个参数可以省略<br>

1、state 当前VueX对象中的状态对象<br>

2、getters 当前getters对象，用于将getters下的其他getter拿来用

this.$store.getters.fullInfo<br>

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

这个属性中存储的 一般都是一些异步执行的方法， 为了在异步执行完成之后 再去通过 commit触发mutations中的对应函数

Action 提交的是 mutation 中的方法，而不是直接变更状态<br>

1、context （与 store 实例具有相同方法和属性的 context 对象）<br>

2、第二个参数是我们在通过dispatch调用时传递的参数

this.$store.dispatch('actions中的方法名'，传给他的参数)<br>

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

<br>

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。<br>

对于模块内部的 getter 和 actions ，根节点状态会作为第三个参数暴露出来：

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。

解决

一般挪到计算属性中使用

...Vuex.mapState({<br>&nbsp; &nbsp; count123:'count'<br>})<br>