Vuex之Getters详解

原文地址： https://www.jeremyjone.com/543/, 转载请注明

---

作为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 =>