vue是当今比较火的一种框架，在很多方面都会用到Vue,今天带大家简单了解一下vue中一款常用的插件VueX

首先Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex中基本的对象

state，驱动应用的数据源；

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

mutations：提交状态修改。也就是set、get中的set，唯一修改state的方式 ，不支持异步操作 。

actions，响应在 view 上的用户输入导致的状态变化。State 单一状态树

mapState 辅助函数

对象展开运算符

Getter 计算

通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

getters:{// ...doneTodosCount:(state,getters)=>{returngetters.doneTodos.length}}store.getters.doneTodosCount// -> 1

使用：

computed:{doneTodosCount(){returnthis.$store.getters.doneTodosCount}}

通过方法访问

getters:{// ...getTodoById:(state)=>(id)=>{returnstate.todos.find(todo=>todo.id===id)}}store.getters.getTodoById(2)// -> { id: 2, text: '...', done: false }

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

Mutation 更改 Vuex 的方法

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

// ...mutations:{increment(state,n){state.count+=n}}store.commit('increment',10)

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象

store.commit({type:'increment',amount:10})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变

Mutation 需遵守 Vue 的响应规则

遵守一些注意事项：

1.最好提前在你的 store 中初始化好所有所需属性。

2.当需要在对象上添加新属性时，你应该

(1).使用 Vue.set(obj, 'newProp', 123), 或者

(2).以新对象替换老对象。

使用常量替代 Mutation 事件类型

Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数

在组件中提交 Mutation

使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store)

Action

action 类似于 mutation，不同在于：

1.Action 提交的是 mutation，而不是直接变更状态。

2.Action 可以包含任意异步操作.

分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

在组件中分发 Action

使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

组合 Action

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise

Module 模块

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

const moduleA={state:{count:0},mutations:{increment(state){// 这里的 `state` 对象是模块的局部状态state.count++}},getters:{doubleCount(state){returnstate.count*2}}}

模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

constmoduleA={// ...actions:{incrementIfOddOnRootSum({state,commit,rootState}){if((state.count+rootState.count)%2===1){commit('increment')}}}}

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

constmoduleA={// ...getters:{sumWithRootCount(state,getters,rootState){returnstate.count+rootState.count}}}

命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

在带命名空间的模块内访问全局内容（Global Assets）

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中

带命名空间的绑定函数

当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐

模块动态注册

在 store 创建之后，你可以使用 store.registerModule 方法注册模块

// 注册模块 `myModule`store.registerModule('myModule',{// ...})// 注册嵌套模块 `nested/myModule`store.registerModule(['nested','myModule'],{// ...})

模块重用

有时我们可能需要创建一个模块的多个实例，例如：

创建多个 store，他们公用同一个模块 (例如当runInNewContext选项是false或'once'时，为了在服务端渲染中避免有状态的单例)

在一个 store 中多次注册同一个模块

如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致状态对象被修改时 store 或模块间数据互相污染的问题。

实际上这和 Vue 组件内的data是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）

作者：吃肉肉不吃肉肉

链接：https://www.jianshu.com/p/ecad4ab4fa95

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。