首页手记 Vuex入门

Vuex入门

标签：

Vue.js

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

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

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

虽然 vuex 很好用，但是，很多小伙伴和我吐槽 vuex 的文档和 vue-ssr 的文档一样，让人看得一脸懵逼。

好吧，下面就让我来带着大家一起入门 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.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({})

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

// main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({
  router,  // 引入store
  store,  render: h => h(App)
}).$mount('#app')

Vuex的使用

完成了 vuex 的安装和引入，接下来我们进入 Vuex 的使用。

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

State

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

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

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

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

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  // 添加state
  state: {    count: 1
  }
})

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

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

在模板中，我们使用 $store.state.count 引入该全局状态，没错，使用它就是那么简单，只需要以 $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 ，代表着我们又一次引用成功。现在，是不是已经感受到了 vuex 的威力？

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.jsimport 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>

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