Vue之vuex的使用详解

在 vue 开发中，组件通信一直是一大痛点。

当项目是很简单的 SPA 或者多入口项目时，可以靠着 vue 自带的 prop/$emit 进行组件通信；规模再大一些，可以搭配使用 bus 总线进行兄弟组件通信；项目再大一些，出现更复杂的组件关系时，复杂的组件通信可以让你写得怀疑人生。

万幸的是， vue 官方出品了 vuex ，通过全局式的状态管理，解决了这一痛点。

安装并引入

正常情况下，我们使用 vue-cli3 生成项目时，可以选择集成 vuex 到项目中。此时， vue-cli3 会自动安装 vuex ，并在 src 文件夹下生成 store.js 完成 vuex 的引入和配置。

但是如果我们没有使用 vue-cli3 或者生成项目时没有选择集成 vuex 。此时，就只能手动安装并引入 vuex 了。

安装

由于 vuex 是用于全局状态管理的，所以，它不仅仅作用于开发环境，而且还要用于生产环境。
显而易见，安装 vuex 应该使用 -S 即 --save 命令。

npm install vuex -S

引入

类似于 vue-cli3 生成的项目，我们在 src 文件夹下新建 store.js ，并在其中写入

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({})

然后，我们只需要在 vue 实例中引入 store.js 中的 Vuex.Store 实例即可：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  // 引入store
  store,
  render: h => h(App)
}).$mount('#app')

Vuex的使用

vuex 中有三要素： state， mutation 以及 action 。它们之间的关系可以用官网那张著名的图来表示：

image.png

State

简单来说， state 表示状态，类似于 vue 中的 data （其实本质上就是差不多的， vuex 在 vue 的 beforeCreate 钩子中将 state 混入进 data）。但是，它们又有很大的不同： 在使用者看来， state 是全局的，这得益于 vuex 的设计理念——单一状态树。这些我将在后几篇文章中详细，现在我们只需要知道 state 是类似于全局下的 data 。

接下来我们通过一个简单例子来感受下 state ：

首先，我们需要修改 store.js 文件，配置 state 。可以看到，我们在生成 Vuex.Store 实例时传入了实例化选项对象，对象包含一个 state 属性， state 对象的属性就是我们定义的全局状态。

此时，我们定义了一个全局状态——count ，并将其的初始值设为1 。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 添加state
  state: {
    count: 1
  }
})

接下来，我们需要在组件中引用 count，由于它是全局状态，我们可以在任何一个组件中使用。为了展示其威力，我们在两个不同的组件中使用它。

首先我们在 App.vue 中使用它：

在模板中，我们使用 store.state.key 的形式调用。

// App.vue
<template>
  <div id="app">
    <div id="nav">
      {{$store.state.count}}
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

可以发现， Home 前多出了一个 1 ，这代表着我们成功引入了全局状态 count 。

接下来我们在 Home.vue 的子组件 HelloWorld.vue 中引入 count 。

相同的引用方式： $store.state.count

// HelloWorld.vue
<template>
  <div class="hello">
    {{$store.state.count}}
  </div>
</template>

可以发现，页面中又多出了一个 1 ，代表着我们又一次引用成功。

Mutation

但是，上面的示例有个问题，那就是全局状态是静态的。如果在实际应用场景中，一般来说，会经常更改状态。

我们直接在方法中修改 this.$store.state.key 的值可以吗？
不好意思，当然是不行的。

state 和 data 的另一大区别在于，你不能直接改变 state 。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

简而言之，我们把 mutation 当做接收 state 作为参数并修改 state 的自定义事件即可，上一段所说的 commit 就是触发 mutaion 这个自定义事件的方法。

光说不练假把式，接下来，我们对为 vuex 添加上 mutation ，实现 state 的动态改变：
首先，当然是修改生成 Vuex.Store 示例的选项对象，为其添加 mutations 。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  },
  // 添加mutation
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在上面的代码中，我们添加了一个名为 increment 的 mutation 。完成了自定义事件，接下来，我们只需要在组件中对 mutation 进行触发即可。

我们在 HelloWorld.vue 添加一个按钮，每次点击触发一次 increment 这个 mutation 。可以发现，触发方式很简单，只需要调用 store 自带的 commit 方法，其中参数为需要触发的 mutation 的名称。

// HelloWorld.vue
<template>
  <div class="hello">
    <div>{{$store.state.count}}</div>
    <button @click="$store.commit('increment')">修改count</button>
  </div>
</template>

点击页面中的按钮，你会发现，页面中的两个 count 都同时增加了1，说明我们成功实现了 state 的动态修改。

Action

action 类似于 mutation ，也相当于一种自定义事件。只不过， action 操作的是 mutation 而不是 state 。

添加 action 的方法类似，在选项对象中新增 action 属性即可。与 mutation 的参数不同， action 的参数就是当前创建的 Vue.store 对象实例的上下文，一般将其命名为 context 。我们需要使用其自带的 commit 方法来触发 mutation 。

下面我通过实际的例子来尝试下 action ：

首先，修改选项对象，使得新添加的 action 可以触发之前的 mutation ：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
})

由于我们一般来说仅仅需要 context 中的 commit 方法，所以可以采用解构的方式，直接调用 commit 方法，而不需要以 context.commit 的方式使用它。

接下来，只需要修改 HelloWorld.vue ，使其能够在点击按钮时触发即可。
action 的触发方式和 mutation 类似，只不过调用的方法是 dispatch 。

// HelloWorld.vue
<template>
  <div class="hello">
    <div>{{$store.state.count}}</div>
    <button @click="$store.dispatch('increment')">修改count</button>
  </div>
</template>

点击页面按钮，你会发现，实现了和之前相同的效果。

总结

学会了 vuex 三贱客： state ， mutation ， action ，我们再回过头看看前面的那张关系图，此时应该很容易理解了吧？

组件交互触发 action ， 在 action 中进行异步操作（可选）并触发 mutation ， mutation 控制 state 的变动， state 修改之后，触发响应式，重新渲染组件。

彩蛋

在官方文档中，提到需要将异步操作放入 action 中，而不能放在 mutation 中。实际上，在 mutation 中也可以进行异步操作，而且也不会导致什么奇怪的事情。

但是，既然官方文档中这么说了，我们在实际开发中，一般还是老老实实地将所有异步操作放在 action 中。

另外，说了这么多，其实在一些项目中，可以使用 provide/inject 代替 vuex 。灵活使用 provide/inject ，有时可以起到出乎意料的作用哦。