Vuex

Vuex

vuex官方网站

定义

1. vuex是一个专门为Vue.js应用程序开的状态管理模式。
2. 采用集中式存储管理应用的所有组件的状态。
3. 以相应的规则保证以一种可以预测的方式发生变化。（响应式变化）

使用场景

多个视图依赖于同一状态。(读信息)
例如：多个页面需要访问同一信息。
来自不同视图的行为需要变更同一状态。（改信息）
例如：当购买会员之后，要在多个页面中进行修改。

1、组件会被销毁

假如有这样一个组件，他是弹窗，有一些复选框和输入框，用户会选择和填写信息；
然后这个弹窗会被关闭和打开，由于业务需要，这个弹窗输入的内容，希望关闭后可以保留，在重新打开后，内容依然存在。

2、组件基于数据而创建

用户登录后，读取权限配置表，这显然是一个异步操作；
这个配置表可能会影响很多页面。比如被影响的组件的加载条件，例如是
v-if="$store.state.userInfo.superVIP；
那么：因为读取权限配置表这个异步操作，可能影响多个组件，而这些组件之间的关系，显然是不可预料的（即不一定是在同一个父组件下面）；
那么这个异步操作，写在某一个组件里就不太合适（因为其他组件读取这个组件很不方便，即使他是根组件）；

3、多对多事件——多处触发，影响多处

假如有一个事件，比如：切换页面显示风格，他将改变某一个变量的值；
当该变量为 true 时，那么页面风格为白天（主要影响 v-bind:style 的值）；
当该变量为 false 时，那么页面风格为晚上（同上）；
在多个地方可以切换这个页面风格开关；
毫无疑问，这个变量将影响多个地方的 v-bind:style 的值；
这就是 多对多 场景；
总而言之，假如你需要 数据 和 组件 分离，分别处理，那么使用 Vuex 是非常合适的。

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

注意：如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。

Vuex的组成

state--------数据仓库
getter---------获取数据
mutation-----用来修改数据（同步）
action-------用来提交mutation(可以异步)

具体内容可查看官方文档

安装Vuex

安装vuex包：npm install vuex
创建vuex实例：

new Vuex.store()

在main.js中将vuex实例挂载在vue对象上。