状态管理 vuex

Vuex使用

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装

可以参考网址https://vuex.vuejs.org/zh/ins...
这里我就不做多的介绍了。

概念

(1)state:单一状态树 ,每个应用将仅仅包含一个 store 实例。

(2)getters:可以从store 中的 state 中派生出一些状态，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

(3)mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
*常量的设计风格
[SOME_MUTATION] (state) {
// mutate state
}
*必须是同步函数

(4)actions:

模块分割

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

module文件夹中每个都是子store,在index.js文件中需要引入单个module下面的子store，同时需要在modules中写入单个module，如下:

namespaced: true的问题

在每个单独的module文件中，使用开启命名空间

注意:
(1)应用层级的状态应该集中到单个 store 对象中。
(2)提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
(3)异步逻辑都应该封装到 action 里面。

Vuex在项目中的使用

1. 非父子通信问题
2. 异步数据快照，缓存后端数据，提高用户体验（单页面中可以减少请求后端数据）

1.非父子通信问题

下面以一个简单的module为例

在这个userinfoModule中state中设置了一个username，mutations中有一个setUsername方法，现在来看视图中如何使用:
首先，username是需要在login时存入的，那么在login页面中需要通过import引入
在login页面的methods中解构
,
userinfo是modules中的单个module的名字,setUsername是存在userinfoModule中的方法。那么在用户登录成功的时候需要写上this.setUsername(this.username);如下，即可成功将此时登录的username存入到userinfoModule,这是一个简单的设置。
那么如何在别的页面使用这个username呢？下面举个例子来完成一个简单的非父子通信问题：
首先在那个页面使用username,就需要在页面中通过import来引入
在页面的computed中通过解构的方法
...mapState("userinfo", ["username"]),
就可以在页面中通过this.username来使用了。
以上是一个简单的通信问题

2. 异步数据快照，缓存后端数据，提高用户体验（单页面中可以减少请求后端数据）

下面简单介绍一下如何在Vuex中请求数据并缓存数据，取用数据。

在checkoutModule中，数据请求是写在actions中的，其中有个方法store.rootState.userinfo.username,这个方法是单个module之间通过store.rootState来取值通信的，rootState是根实例。在actions中设置一个名为getCartList的方法，需要传一个参数store，通过store.commint()将请求回来的数据通过setCartlist这个方法设置为cartlist，此时cartlist中是需要的数据。下面我们在别的页面调用这个数据：
首先，本着在哪里使用就要在哪里引入的原则，先通过import导入，
然后在computed中解构，那么此时这个cartlist就可以随意使用了。

那么，因为Vuex有缓存，如果数据需要变更，我需要在别的页面再调用这个axios该怎么办呢？
首先需要import引入import { mapActions } from "vuex";
然后在methods中解构
最后在哪里需要调用数据请求直接
就可以让axios重新请求一次了。此时得到的数据就是最新的了。

vue chrome devtools

可以通过devtools来调试

持久化

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。
首先安装cnpm i vuex-persistedstate --save
在store下的index.js中
可以持久化所有state,也可以指定需要持久化的state

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此，如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。

以上，是我个人做出的一点总结，欢迎大家指正及讨论
感谢Vue作者及团队！