测试Getter

Vuex Getters

有时，我们可能需要基于 store 中的状态来计算推导状态，例如过滤一个项目列表，并对过滤结果进行计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果多个组件需要用到这个推导后的状态，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。

Vuex 允许我们在 store 定义 “getters” （将它们视为 store 的计算属性）。getter 函数将接收 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

这些 getter 函数将导出在 store.getters 对象上：

store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]

getter 函数也接收其他 getter 作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

现在我们可以轻松地在任意组件中使用 getter 了：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

mapGetters 工具函数

mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中。

import { mapGetters } from "vuex"
export default {
  // ...
  computed: {
    // 使用对象扩展操作符把 getter 混入到 computed 中
    ...mapGetters([
      "doneTodosCount",
      "anotherGetter",
      // ...
    ])
  }
}

如果你要将 getter 映射为不同的名称，请使用一个对象：

	mapGetters({
 
 
	// 映射 this.doneCount 到 store.getters.doneTodosCount 
 
 
	doneCount: "doneTodosCount" 
 
 
	})