Vuex之Getters详解

作为Vue的状态管理工具，Vuex的使用率相当之高。Vuex具有4个属性，state，getters，actions，和mutations。

今天来讨论一下getters。它相当于vue的computed计算属性。每当state中的值变化时，它也会自动更新。这个在我们需要那些稍微对state中的属性进行改造的属性时很有帮助。在实际生产中，我们会大量使用getters，而state会相对较少。

getters的基本用法，直接调用

首先在根目录下创建一个store.js：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 状态对象
const state = {
  myList: ["a", "b", "c", "d", "e"]
};

// getters计算属性对象
const getters = {
  getObjByIndex(state): {
    return function(index) {
      return state.myList[index];
    };
  }
};

// 包含多个用于更新state属性的函数的对象
const mutations = {};

// 包含多个事件回调函数的对象
const actions = {};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

然后我们在main.js中引用store，并添加到Vue实例中:

import store from "@/store";

new Vue({
  store,  // 将store对象添加到Vue实例
  render: h => h(App)
}).$mount("#app");

这样就完成了最简单的Vuex加载。

调用方案

加载之后，我们就可以在任何Vue组件中使用store，具体方法：

this.$store.getters["getObjByIndex"](0)  // 或 this.$store.getters.getObjByIndex(0)

因为JavaScript的对象允许我们使用点的方式或者中括号的方式调用对象内容，所以这两种方式都可以调出getters中的属性信息。

• 注意：我这里使用了闭包的形态，因为在getters中是属性，不是函数，所以我们不能直接传参调用，但是在实际使用中我们经常需要一些类似id，index这样的参数来调用某一个序列中的某一个值。为了解决这个问题，可以使用闭包的方案，具体闭包的功能这里不赘述。

因为Vuex的store本身就是一个对象管理，我们都可以通过直接调用的方式来操作。但是每一次都要写this.$store.getters.xxx这种形式真的很麻烦，有没有简单的方式呢？Vuex给了我们很好的解决方案：mapGetters。

getters的进阶用法，使用mapGetters简化代码

对于Vue的组件来说，我们可以使用mapGetters函数，具体方法如下：

先看用法

mapGetters是官方提供的map系列函数中的一个，它会直接返回一个对象，将我们需要的 对象 / 函数 直接加载到组件中。

单store

假设我们还是使用上述创建的store，那么它在Vue组件中可以这样使用：

import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["getObjByIndex"]);  // 导入getters的属性
    }
}

这样就可以在这个Vue组件中使用这个属性了。

getObjByIndex(0); // 会直接取值

分模块store

如果我们的项目很大，单模块的store完全不能满足我们的需求，这个时候就需要分模块。

再比如我们现在有一个叫myStore模块的store：

const state = {
  myList: []
};

const getters = {
  getObjByIndex(state): {
    return function(index) {
      return state.myList[index];
    };
  }
};

const mutations = {};

const actions = {};

export const myStore = {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

该仓库的模块名为myStore，继续导入到Vue组件中：

import { mapGetters } from "vuex";

export default {
    computed: {
        // 这个时候就需要在导入时添加上模块名
        ...mapGetters("myStore", ["getObjByIndex"]);
    }
}

重命名

如果想重命名该属性，可以使用如下语句，这个对于所有模块都是一样的：

import { mapGetters } from "vuex";

export default {
    computed: {
        // 对属性重命名，这样我们就可以在该组件中使用 getMyObj 了。
        ...mapGetters("myStore", {getMyObj: "getObjByIndex"});
    }
}

深入理解

为何我们可以这样方便的使用mapGetters，我们可以通过源码来找寻答案：

源码很短：

/**
 * Reduce the code which written in Vue.js for getting the getters
 * @param {String} [namespace] - Module's namespace
 * @param {Object|Array} getters
 * @return {Object}
 */
var mapGetters = normalizeNamespace(function (namespace, getters) {
  var res = {};
  normalizeMap(getters).forEach(function (ref) {
    var key = ref.key;
    var val = ref.val;

    // The namespace has been mutated by normalizeNamespace
    val = namespace + val;
    res[key] = function mappedGetter () {
      if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
        return
      }
      if (!(val in this.$store.getters)) {
        console.error(("[vuex] unknown getter: " + val));
        return
      }
      return this.$store.getters[val]
    };
    // mark vuex getter for devtools
    res[key].vuex = true;
  });
  return res
});

具体来看

1、首先调用了通用的函数normalizeNamespace，而这个函数就是将传入的改成namespace/getters的分割样式，如果没有namespace，那么直接返回getters，具体函数如下：

function normalizeNamespace (fn) {
  return function (namespace, map) {
    if (typeof namespace !== 'string') {
      map = namespace;
      namespace = '';
    } else if (namespace.charAt(namespace.length - 1) !== '/') {
      namespace += '/';
    }
    return fn(namespace, map)
  }
}

2、迭代函数normalizeMap只是将输入的getters对应成store的内部属性，具体函数如下：

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(function (key) { return ({ key: key, val: key }); })
    : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] });
  })
}

这段函数也说明了为什么我们可以使用对象来更改名称，它依旧会映射我们传入的value。

3、查找属性。之后的代码就很简单了，就是简单的判断+查找，如果找到对应的属性，最后返回 this.$store.getters[val]。

这就是mapGetters的大体工作流程。

学以致用

看过源码，那么我们试着不用mapGetters来调用。听起来没什么用，但是实际应用中，也会经常使用该方法，比如在js模型中，我们就需要手动调用。

首先引用store，

import store from "@/store";

然后直接使用store调用一开始我们定义的属性：

var myObj = store.getters["myStore/getObjByIndex"]

已经成功调取，是不是很方便。