vuex getters用法

在Vuex中，getters用于获取store中的state数据并进行计算或筛选，类似于Vue组件中的computed属性。getters可以被认为是store的计算属性，它们的返回值会被缓存，只有当它所依赖的状态发生改变时才会重新计算。

以下是getters的使用方法：

1. 在store中定义getters

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

2. 在组件中使用getters

<template>
  <div>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodos'
    ])
  }
}
</script>

在上面的示例中，我们在store中定义了一个名为doneTodos的getter，该getter返回所有已完成的todo。在组件中，我们使用mapGetters将getter映射到计算属性中，并在模板中使用它来渲染已完成的todo列表。

注意，在组件中使用getter时，我们不需要调用它，只需要将它作为一个计算属性使用即可。