Vuex步骤与使用

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。他使数据流通更加方便快捷，避免了很多冗余的业务逻辑，不用在组件中重复的去定义。一般在开发中大型项目的时候会用到vuex，小型项目开发用起来会有些麻烦。

Vuex的理解

Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。

在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率

Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属性。

Vuex概念

五个核心：
state： 存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。

actions:（异步操作）包含任意异步操作，通过提交 mutation 间接更变状态。

mutations: （改变状态）更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

getters:（计算属性）可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

moduleas：（状态模块）store的子模块 为开发大型项目 更方便与状态管理

Vuex 流程图如下：

Vuex使用步骤

1:安装Vuex

npm install vuex --save

2.store文件中引入vuex
为了方便全局使用，一般会新建一个store文件夹，用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并输出store接口。
index.js:

<