学习Vuex实现自己的Vuez插件-getters

Vuex插件-getters简介

在上一篇文章中，我们已经实现了对所有的Vue实例绑定同一个store实例。通过官网的介绍，我们可以知道数据的访问，都是通过store.的方式来进行的，也就是说，store的实例上必须有这些属性，根据这个，我们来设计一个Store类。

也许这段代码，你有些地方看不懂，为什么要先去声明一个空的state对象呢？其实state跟getters、mutations都是挂载在Store实例上的，所以我们在实例化Store对象的时候，就需要把它们创建出来。

export default class Store {
  constructor(options) {
    this._vm = new Vue({
      data: {
        $state: options.state
      }
    });

    this._mutations = options.mutations;
    this._actions = options.actions;
    this._wrappedGetters = options.getters;
  }
}

其实这里有一个问题，你可以先想一想，getters是我们通过mapGetters来创建的，如果我们直接使用this._wrappedGetters，那么在使用的时候，我们只能这样写：

this.$store.getters.getXXX()

但是，我们希望能够像这样写：

this.$store.getXXX()

所以，我们需要对getters进行一层包装，我们创建一个对象，然后把getters的属性都挂载到这个对象上，这样我们就可以通过this.$store.getXXX()来访问getters了。

export function install(_Vue) {
  _Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        this.$store = this.$options.store;
      } else {
        this.$store = getStore();
      }
    },
    computed: {
      $store() {
        return this._store;
      }
    }
  });
}

这里我们通过Vue.mixin混入了我们自己的一个插件，在这个插件中，我们会在beforeCreate生命周期钩子中把store实例挂载到this上，这样我们就可以在组件中通过this.$store来访问store了。

getters的实现

getters的实现非常简单，我们只需要创建一个函数，然后把这个函数挂载到store的实例上就可以了。

export const getters = {
  getXXX() {
    return this._vm._data.$state.xxx;
  }
};

然后我们在使用的时候，就可以这样写：

this.$store.getters.getXXX()

getters的应用场景

getters的应用场景非常广泛，我们可以用它来做很多事情，比如：

• 从state中获取数据
• 对state中的数据进行计算
• 过滤state中的数据
• 根据state中的数据生成新的数据

总结

getters是Vuex中非常重要的一个特性，它可以帮助我们更好地管理和访问state中的数据。通过本文，我们已经学习了getters的原理、实现方式以及在项目中的实际应用。希望大家能够掌握getters的用法，并将其灵活运用到自己的项目中，从而优化代码结构，提升开发效率。