Vuex使用

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 方便数据管理，避免数据重复加载，减少服务端压力。这个状态自管理应用包含以下几个部分：

state：驱动应用的数据源；

view：以声明方式将 state 映射到视图；

actions：响应在 view 上的用户输入导致的状态变化

NPM

npm install vuex --save 进行安装在pack.json可查看版本

Yarn

yarn add vuex

在使用webpack 打包使，必须通过 Vue.use(Vuex) 来安装Vuex：

核心概念

state：可理解为改模块定义了那些数据,可通过this.$store访问到。

Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，如上图。在view 可使用  this.$store.commit("moduleA/stateChange", { name: "潘神" }); 调用

actions：Action 类似于 mutation，不同在于：

Action 是通过 mutation，而不是直接变更状态，上面已经说到，Mutation是改变state唯一方法

Action可操作任意异步函数，比如调用服务端请求。

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

const moduleA = { 

namespaced: true,

 state: { ... },

 mutations: { ... },

 actions: { ... }, 

 getters: { ... }

}

const moduleB = { 

namespaced: true,

 state: { ... },

 mutations: { ... },

 actions: { ... }, 

 getters: { ... }

}

export default new Vuex.Store({

    modules: {

        moduleA,

        moduleB

    }

})

注意：在使用拆分model时，namespaced=true，不然 this.$store会找不到对应model。

在View中的使用

在View中更改Model state

当没有异步网络操作更改是，我们可以直接操作

this.$store.commit("moduleA/stateChange", { name: "潘神" }); 来进行修改。

moduleA/stateChange：表示 moduleA 下面的同步更新函数 stateChange

{ name: "潘神" } 传递参数

如图名字已经更新。

如果进行异步操作更新，可以 this.$store.dispatch("moduleA/loadVote", {name:"心智"}) 其最终还是会走到同步更新函数stateChange 。因为前面已经说到 更改state 唯一方法就是mutations。