2019.12vuex状态管理集

目录：Vuex简介

            State数据源

            Getters

            Mutations

            Actions

正文：

1.Vuex简介

vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要：

      多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会变得很繁琐，并且对于兄弟组件间的传递无能为力。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式都很脆弱，通常会导致无法维护代码。所以，这时就出现了Vuex。

     他采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了vuex，组件就都和store通讯了。这也是为什么官网再次会提到Vuex构建大型应用的价值，如果你不打算开大大型的单页应用，使用Vuex可能会变得很繁琐，对于大型项目，可以使用Vuex作为不同组件之间的状态管理，而对于小型的项目，推荐使用HTML5特有的属性，localStroage和sessionStroage作为数据之间的传递。（摘至汉堡大痴）

vuex就相当于A有200元，B和C都可能会向A借钱，C也可能需要向B借钱，但是这个借钱的时间还不确定，如果到了时间需要借钱的时候再去找A和B，可能会找不到人，而且很麻烦。vuex就像是一个仓库，A先把钱放到仓库里面，B和C需要的时候自己直接去拿就行。

2. State数据源

在vuex中state就像是组件中data，用于存储数据。然后我们在页面可以通过this.$store.state.xxx来获取到状态中的数据。

在页面中获取：

页面显示：

3.Getters

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。

首先修改页面：

其次修改store文件：

页面的值：

4.Mutations

数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？Mutations是专门用来修改store中的数据的。

首先：给页面上的按钮绑定事件：通过this.$store.commit进行提交

其次，在store页面接收：实现每点击一次按钮，count就+1

点击一次：数据被改变：

5.Actions

在上面我们可以看到，点击之后数据被改变，但是官方并不提倡我们这样去更改数据，而是用一个Actions去提交动作。在actions中提交mutation再去修改状态值。

首先：store文件中

其次：页面中

可以看到，在页面点击按钮，数据同样被改变：

ok，这就是vuex的大概内容。如有问题，望大家不吝赐教。谢谢。