vue（23）Vuex的5个核心概念

Vuex的核心概念

Vuex有5个核心概念，分别是State，Getters，mutations，Actions，Modules。

State

  Vuex使用单一状态树，也就是说，用一个对象包含了所有应用层级的状态，作为唯一数据源而存在。没一个Vuex应用的核心就是store，store可理解为保存应用程序状态的容器。store与普通的全局对象的区别有以下两点：

  （1）Vuex的状态存储是响应式的。当Vue组件从store中检索状态的时候，如果store中的状态发生变化，那么组件也会相应地得到高效更新。

  （2）不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交mutation。这可以确保每个状态更改都留下可跟踪的记录，从而能够启用一些工具来帮助我们更好的理解应用

  安装好Vuex之后，就可以开始创建一个store，代码如下：

const store =  new Vuex.Store({
  // 状态数据放到state选项中
  state: {
    counter: 1000,
  },
  // mutations选项中定义修改状态的方法
  // 这些方法接收state作为第1个参数
  mutations: {
    increment(state) {
      state.counter++;
    },
  },
});

  在组件中访问store的数据，可以直接使用store.state.count。在模块化构建系统中，为了方便在各个单文件组件中访问到store，应该在Vue根实例中使用store选项注册store实例，该store实例会被注入根组件下的所偶遇子组件中，在子组件中就可以通过this.$store来访问store。代码如下：

new Vue({
  el: "#app",
  store,
})

  如果在组件中要展示store中的状态，应该使用计算属性来返回store的状态，代码如下：

computed: {
    count(){
        return this.$store.state.count
    }
}

  之后在组件的模板中就可以直接使用count。当store中count发生改变时，组件内的计算属性count也会同步发生改变。

  那么如何更改store中的状态呢？注意不要直接去修改count的值，例如：

methods: {
    handleClick(){
        this.&store.state.count++;    // 不要这么做
    }
}

  既然选择了Vuex作为你的应用的状态管理方案，那么就应该遵照Vuex的要求；通过提交mutation来更改store中的状态。在严格模式下，如果store中的状态改变不是有mutation函数引起的，则会抛出错误，而且如果直接修改store中的状态，Vue的调试工具也无法跟踪状态的改变。在开发阶段，可以开启严格模式，以避免字节的状态修改，在创建store的时候，传入strict: true代码如下：

const store = new Vuex.Store({
    strict: true
})

  Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个处理器函数，这个处理器函数就是实际进行状态更改的地方，它接收state作为第1个参数。

  我们不能直接调用一个mutation处理器函数，mutations选项更像是事件注册，当触发一个类型为increment的mutation时，调用此函数。要调用一个mutation处理器函数，需要它的类型去调用store.commit方法，代码如下：

store.commit("increment")

Getters

  假如在store的状态中定义了一个图书数组，代码如下：

export default new Vuex.Store({
  state: {
    books: [
      { id: 1, title: "Vue.js", isSold: false },
      { id: 2, title: "common.js", isSold: true },
      { id: 3, title: "node.js", isSold: true },
    ],
  },
})

  在组件内需要得到正在销售的书，于是定义一个计算属性sellingBooks，对state中的books进行过滤，代码如下：

computed: {
    sellingBooks(){
        return this.$store.state.books.filter(book => book.isSold === true);
    }
}

  这没有什么问题，但如果是多个组件都需要用到sellingBooks属性，那么应该怎么办呢？是复制代码，还是抽取为共享函数在多处导入？显然，这都不理想

  Vuex允许我们在store中定义getters（可以认为是store的计算属性）。与计算属性一样，getter的返回值会根据它的依赖项被缓存起来，且只有在它的依赖项发生改变时才会重新计算。

  getter接收state作为其第1个参数，代码如下：

export default new Vuex.Store({
  state: {
    books: [
      { id: 1, title: "Vue.js", isSold: false },
      { id: 2, title: "common.js", isSold: true },
      { id: 3, title: "node.js", isSold: true },
    ],
  },
  getters: {
    sellingBooks(state) {
      return state.books.filter((b) => b.isSold === true);
    },
  }
})

  我们定义的getter将作为store.getters对象的竖向来访问，代码如下；

<h3>{{ $store.getters.sellingBooks }}</h3>

getter也可以接收其他getter作为第2个参数，代码如下：

getters: {
    sellingBooks(state) {
      return state.books.filter((b) => b.isSold === true);
    },
    sellingBooksCount(state, getters) {
      return getters.sellingBooks.length;
    },
}

  在组件内，要简化getter的调用，同样可以使用计算属性，代码如下：

computed: {
    sellingBooks() {
      return this.$store.getters.sellingBooks;
    },
    sellingBooksCount() {
      return this.$store.getters.sellingBooksCount;
    },
  },

  要注意，作为属性访问的getter作为Vue的响应式系统的一部分被缓存。

  如果想简化上述getter在计算属性中的访问形式，可以使用mapGetters辅助函数。mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
        "sellingBooks",
        "sellingBooksCount"
    ]),
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.booksCount` 映射为 `this.$store.getters.sellingBooksCount`
  booksCount: 'sellingBooksCount'
})

  getter还有更灵活的用法，用过让getter返回一个函数，来实现给getter传参。例如，下面的getter根据图书ID来查找图书对象

getters: {
    getBookById(state) {
      return function (id) {
        return state.books.filter((book) => book.id === id);
      };
    },
}

  如果你对箭头函数已经掌握的炉火纯青，那么可以使用箭头函数来简化上述代码

getters: {
    getBookById(state) {
      return (id) => state.books.filter((book) => book.id === id);
    },

下面在组件模板中的调用返回{ "id": 1, "title": "Vue.js", "isSold": false }

<h3>{{ $store.getters.getBookById(1) }}</h3>

mutation

上面已经介绍了更改store中的状态的唯一方式是提交mutation。

提交载荷（Payload）

在使用store.commit方法提交mutation时，还可以传入额外的参数，即mutation的载荷（payload），代码如下：

mutations: {
    increment(state, n) {
      state.counter+= n;
    },
  },

store,commit("increment", 10)

载荷也可以是一个对象，代码如下:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

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

对象风格的提交方式

提交mutation时，也可以使用包含type属性的对象，这样传一个参数就可以了。代码如下所示：

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

当使用对象风格提交时，整个对象将作为载荷还给mutation函数，因此处理器保持不变。代码如下：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

在组件中提交mutation时，使用的是this.$store.commit("increment")，如果你觉得这样比较繁琐，可以使用mapMutations辅助函数将组件中的方法映射为store.commit调用，代码如下：

import { mapMutations } from "vuex";
methods: {
    ...mapMutations([
      // 将this.increment()映射为this.$store.commit("increment")
      "increment",
    ]),
}

除了使用字符串数组外，mapMutations函数的参数也可以是一个对象

import { mapMutations } from "vuex";
methods: {
    ...mapMutations([
      // 将this.add()映射为this.$store.commit("increment")
      add: "increment",
    ]),
}

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

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

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

• 使用 Vue.set(obj, 'newProp', 123), 或者
• 以新对象替换老对象。例如，利用对象展开运算符 (opens new window)我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件类型

我们可以使用常量来替代mutation类型。可以把常量放到一个单独的JS文件中，有助于项目团队对store中所包含的mutation一目了然，例如：

// mutation-types.js
export const INCREMENT = "increment";

// store.js
import Vuex from "vuex";
import { INCREMENT } from "./mutation-types";
const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [INCREMENT] (state) {
      // mutate 状态
    }
  }
})

Actions

  在定义mutation时，有一个重要的原则就是mutation必须是同步函数，换句话说，在mutation处理器函数中，不能存在异步调用，比如

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      setTimeout( () => {
        state.count++
      }, 2000)
    }
  }
})

  在increment函数中调用setTimeout()方法在2s后更新count，这就是一个异步调用。记住，不要这么做，因为这会让调试变得困难。假设正在调试应用程序并查看devtool中的mutation日志，对于每个记录的mutation，devtool都需要捕捉到前一状态的快照。然而，在上面的例子中，mutation中的setTimeout方法中的回调让这不可能完成。因为当mutation被提交的时候，回调函数还没有被调用，devtool也无法知道回调函数什么时候真正被调用。实际上，任何在回调函数中执行的状态的改变都是不可追踪的。

  如果确实需要执行异步操作，那么应该使用action。action类似于mutation，不同之处在于：

• action提交的是mutation，而不是直接变更状态。
• action可以包含任意异步操作

一个简单的action示例如下：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
        state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
})

  Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。甚至可以用context.dispatch调用其他的action。要注意的是，context对象并不是store实例本身

  如果在action中需要多次调用commit，则可以考虑使用ECMAScript6中的解构语法来简化代码，如下所示：

actions: {
    increment({ commit }) {
      commit("increment");
    },
  },

  action通过store.dispatch方法触发，代码如下：

actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 2000);
    },
  },

  action同样支持载荷和对象方式进行分发。代码如下所示：

// 载荷是一个简单的值
store.dispatch("incrementAsync", 10)

// 载荷是一个对象
store.dispatch("incrementAsync", {
  amount: 10
})

// 直接传递一个对象进行分发
store.dispatch({
  type: "incrementAsync",
  amount: 10
})

  在组件中可以使用this.$store.dispatch("xxx")分发action，或者使用mapActions辅助函数将组件的方法映射为store.dispatch调用，代码如下：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    incrementBy(state, n){
      state.count += n;
    }
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
    incrementBy({ commit }, n) {
      commit("incrementBy", n);
    },
  },
})

// 组件
<template>
  <div id="app">
    <button @click="incrementNumber(10)">+10</button>
  </div>
</template>

import { mapActions } from "vuex";
export default {
  name: "App",
  methods: {
    ...mapActions(["increment", "incrementBy"]),
};

  action通常是异步的，那么如何知道action何时完成呢？更重要的是，我们如何才能组合多个action来处理更复杂的异步流程呢？

  首先，要知道是store.dispatch可以处理被触发的action的处理函数返回的Promise，并且store.dispatch仍旧返回Promise，例如：

actionA({ commit }) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit("increment");
          resolve();
        }, 1000);
      });
    },

现在可以：

store.dispatch("actionA").then(() => {
...
})

在另外一个action中也可以

actions: {
  //...
  actionB({dispatch, commit}) {
    return dispatch("actionA").then(() => {
      commit("someOtherMutation")
    })
  }
}

最后，如果我们利用 async / await (opens new window)，我们可以如下组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

Module

  由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

  为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态

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

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

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

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

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

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

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

1.应用层级的状态应该集中到单个 store 对象中。

2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3.异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块