状态管理 vuex

Vuex使用

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

安装

能够参考网址https://vuex.vuejs.org/zh/ins...
这里我就不作多的介绍了。vue

概念

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

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

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

(4)actions:
ios

模块分割

因为使用单一状态树，应用的全部状态会集中到一个比较大的对象。当应用变得很是复杂时，store 对象就有可能变得至关臃肿。
为了解决以上问题，Vuex 容许咱们将 store 分割成模块（module）。每一个模块拥有本身的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行一样方式的分割：

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

namespaced: true的问题

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

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

Vuex在项目中的使用

1. 非父子通讯问题
2. 异步数据快照，缓存后端数据，提升用户体验（单页面中能够减小请求后端数据）npm

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来使用了。
以上是一个简单的通讯问题axios

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做者及团队！