Vuex中Getter的用法详解

Vuex是Vue.js中使用的状态管理模式。它建立在Vue.js的基础上，提供了中央数据存储库，使得组件之间共享状态变得非常容易。 getter是Vuex中获取状态的一种方法，它可以访问状态的属性并进行某些计算。本篇文章将详细讲解getter的用法。

Getter的定义

在Vuex中使用getter可以获取状态的值并进行计算。在进行计算时，它可以接受一个参数。下面是一个基本的getter的定义:

const store = new Vuex.Store({
  state: {
    items: []
  },
  getters: {
    getItemCount: state => {
      return state.items.length
    }
  }
})

在这个例子中，我们定义了一个名为getItemCount的getter，它返回items数组的长度。

Getter的使用

我们可以在Vue组件中使用getter，以获取状态或者做进一步的计算。在Vue组件中的getter通常是由computed属性实现的。下面是一个例子:

export default {
  name: "ItemList",
  computed: {
    getItemCount() {
      return this.$store.getters.getItemCount
    }
  }
}

在这个例子中，我们在computed计算属性中定义了一个getItemCount计算属性，它通过调用getItemCountgetter并使用$store来获取items数组的长度。

Getter的参数

Getter接受两个参数，第一个参数是state ，第二个参数是其他getter。下面是一个获取所有订单的数量的例子:

const store = new Vuex.Store({
  state: {
    orders: [
      {id: "1", amount: 100},
      {id: "2", amount: 50},
      {id: "3", amount: 75},
      {id: "4", amount: 300}
    ]
  },
  getters: {
    orderCount: state => {
      return state.orders.length
    },
    totalAmount: (state, getters) => {
      let total = 0;
      state.orders.forEach(order => {
        total += order.amount
      })
      return total
    }
  }
})

在这个例子中，我们定义了两个getter, orderCount，用于获取订单的数量，而totalAmount用于获取所有订单的总金额。totalAmount使用state访问订单列表，并使用getters获取orderCount的值。

Getter的缓存

getter在state改变时会重新执行，但是当getter获取的值没有发生变化时，缓存可以避免重新计算。在Vuex中，有两种缓存getter的方法:

通过修改配置对象：

const store = new Vuex.Store({
  state: { ... },
  getters: {
    ...mapGetters([
      'getItemCount'
    ]),
    // 通过修改配置对象
    getSingleItem: state => {
      return index => {
        return state.items[index]
      }
    }
  },
  // 配置对象
  getters: {
    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.NODE_ENV !== 'production',
    getSingleItem: state => {
      return index => {
        return state.items[index]
      }
    }
  }
})

在这个例子中，我们定义了名为getSingleItem的getter来获取单个项目。我们希望该getter能够缓存计算结果，以便在state改变时，实现计算结果缓存。此时需要通过修改配置对象，将getSingleItem标识为一个缓存getter。

通过函数调用实现：

const store = new Vuex.Store({
  state: { ... },
  getters: {
    ...mapGetters([
      'getItemCount'
    ]),
    // 通过函数调用实现
    getSingleItem: (state) => {
      let cache = {};
      return function (index) {
        if (cache[index]) {
          console.log(`get from cache ${index}`);
          return cache[index];
        } else {
          console.log(`compute value ${index}`);
          cache[index] = state.items[index];
          return cache[index];
        }
      }
    }
  }
})

在这个例子中，我们定义了一个名为getSingleItem的getter来获取单个项目。我们使用函数定义这个getter，用一个对象cache来保存计算过的结果。如果getter的计算结果已经存在于缓存中，直接返回缓存的结果。