vuex是Vue全家桶核心成员之一

网上关于运用它的文章繁多，最基础的部分罗列出来

Vuex 是什么？

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

状态自管理应用包含以下几个部分

state，驱动应用的数据源view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。 当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏因为多个视图依赖于同一状态而且来自不同视图的行为需要变更同一状态

简单地说就是，就是很多单页面用到一个数据的时候，你就可以试试这个vuex，毕竟它也叫状态管理工具，先来张图

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 --官网

简单使用

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的数据中心 Store—Store—Store

脚手架搭建一个简单项目，新建一个 vuex 文件夹 建一个子文件 store.js，在mian.js中引入。具体如下 通过以上方法引入后，现在，你可以通过 store.state 来获取状态对象 通过 store.commit 方法触发状态变更，

注：这里的count虽然改变，暂时还不会触发DOM更新

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。 由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

在 Vue 组件中获得 Vuex 状态

从 store 实例中读取状态最简单的方法就是在 计算属性 computed: { count(){ return this.$store.state.count } },

界面监听count即可得到DOM的渲染刷新

mapState 辅助函数

当一个组件需要获取 多个状态 的时候，将这些状态都声明为计算属性会有些重复和冗余 // 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex' computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` count: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState(state) { return state.count + this.localCount } }), 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。 computed: mapState([ 'count' ]), 如过这种方式占用了你的 computed , 那就这样 computed: { localComputed() {/* */ }, //这个是自己的 ...mapState({ count: state => state.count }) },

更改状态之Mutation—Mutation—Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

基本使用： store.commit(‘increment’)

this.$store.commit('increment')

传参

this.$store.commit('increment',10) mutations: { increment(state, n) { state.count = state.count + n //传过来的10 } }

一般我们会：传一个对象

this.$store.commit('increment', { amount: 10 }) mutations: { increment (state, payload) { state.count += payload.amount } }

对象 风格的提交方式

this.$store.commit({ type: 'increment', amount:100 }) mutations: { increment(state, payload) { //payload就是这个对象 state.count = state.count + payload.amount } }

注意（官文告知）

Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

最好提前在你的 store 中初始化好所有所需属性。当需要在对象上添加新属性时，你应该 ·使用 Vue.set(obj, ‘newProp’, 123), 或者 ·以新对象替换老对象。例如，利用对象展开运算符我们可以这样写： state.obj = { ...state.obj, newProp: 123 }

注：Mutation 必须是同步函数(于是有了异步的Action)

mapMutations 辅助函数

import { mapMutations } from 'vuex'

异步操作之 Action—Action—Action

Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。 this.$store.dispatch('increment') mutations: { increment(state) { state.count++ }, }, actions: { increment(context) { context.commit('increment') } //或者这样 increment({ commit }) { commit('increment') } } mutation不能异步操作的，我action 可以

- Actions 支持同样的载荷方式和对象方式进行分发：

辅助函数 mapActions—mapActions—mapActions

import { mapActions } from 'vuex' // ... methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } 组合 Action 处理更加复杂的异步流程

async直接返回一个promise对象，可以用then和cache来处理。sync异步函数遇到await会先返回一个Promise对象，等到异步操作执行完毕，才会根据结果来执行具体的回调函数 // 假设 getData() 和 getOtherData() 返回的是 Promise actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('gotOtherData', await getOtherData()) } }

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

更多拓展见vuex官方文档