VUE 状态树 VUEX 的实用教程

[Jack]

1. 前言

VUE 双向绑定非常好用。你在组建中定义一个数据，在模板中使用它，无论何时修改数据，模板都会实时更新。很爽吧。然而。。。当你需要在多个页面**享数据时，就需要用到 vuex 了。

首先说，为啥不能自己整个全局变量来处理。因为模板中的数据不会连动，除非你自己实现双向绑定。既然有vuex，何必再造轮子。即使造轮子，也要先搞清楚vuex是怎么实现的对吧。

2. 快速理解 vuex 概念

官网的教程 https://vuex.vuejs.org/zh/guide/
如果你还没看过，或者看着有点晕。那这篇文章，可以带你入门。好，快上车。

2.1 核心概念有5个

• State
• Getter
• Mutation
• Action
• Module

其中 module 是模块化，在需要维护数据量较多的情况下用，你可以不管，那就剩下4个。

2.2 State 是用来定义变量状态的（必读）

比如：你在js中定义了一个全局变量，一般这样做 myList = [] 。 state 就是这个功能，定义一个全局可访问的变量（状态树）。

// 你的做法
window.myList = []

// vuex 的做法
const store = new Vuex.Store({
  state: {
    myList : []
  }
})

2.3 Mutation 是修改状态的（必读）

不同的是，你的 myList 拥有 getter 和 setter ，也就是可读和可写。而要修改vuex的state，就需要用 mutation 来处理。

const store = new Vuex.Store({
  state: {
    myList : []
  },
  mutations: {
    push (state, item) {
      state.myList.push(item)
    }
  }
})

2.4 Getter 是获取状态的

getter 更简单，是用来读 state 里面的内容的。你可以做一些处理，例如过滤。

const store = new Vuex.Store({
  state: {},
  mutations: {},
  getters: {
    all: state => {
      return state.myList
    },
    count: state => {
      return state.myList.length
    }
  }
})

2.5 Action 也是修改数据的

action 是 mutation 的延伸，你可以在 action 中来调用 mutation 来修改 state，而且可以实现异步提交。听起来有点绕。举个栗子，你就清晰了。

const store = new Vuex.Store({
  state: {},
  mutations: {},
  getters: {},
  actions: {
    add ({ commit }, item) {
      commit('push', item)
    },
  }
})

3. vuex 怎么用

上一节，说了 vuex 的几个核心概念。也就是：定义和读写状态。对，就这么简单。这一节，带你用 vuex 。你要先用vue脚手架，创建一个 vue 项目，如果还没有，先创建。

3.1 安装

运行 npm install vuex --save 命令，安装 vuex 。

3.2 定义一个 vuex 的全局状态树

在你的项目文件中，新增文件 src/store/index.js

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

const store = new Vuex.Store({
  state: {
    myList : []
  },
  mutations: {
    push (state, item) {
      state.myList.push(item)
    }
  },
  getters: {
    all: state => {
      return state.myList
    },
    count: state => {
      return state.myList.length
    }
  },
  actions: {
    add ({ commit }, item) {
      commit('push', item)
    }
  }
})

export default store

3.2 载入 store

在 src/main.js 中加入如下代码

import store from './store'

new Vue({
  store, // 此处
  render: h => h(App)
}).$mount('#app-box')

3.4 在组建中使用

<template>
  <div>
   {{ listCount() }}
   <span @click="addToList"> click </span>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  methods: {
    ...mapGetters({
      listCount: 'count'
    }),
    ...mapActions({
      listPush: 'add'
    }),
    addToList(){
      this.listPush(this.listCount());
    }
  }
}
</script>

这里例子包含了对state状态树的读和写，并且实时反应到模板上面。

1. 在 ...mapGetters 中定义 state 的获取方法。然后可以在模板和方法中调用它。
   模板中调用： {{ listCount() }}
   方法中调用：this.listCount()

2. 在 ...mapActions 中定义修改的方法，并在方法中调用它。
   方法中调用：this.listPush(...)

至此，你已经掌握了，如何用 vuex 来定义一个 全局状态树，并在 模板中 对他修改和显示。

此时，你可以下山，去修炼更高级的技法了。