vue mapgetters

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

export default store;

// MyComponent.vue
<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: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodos' // 将 `this.doneTodos` 映射为 `this.$store.getters.doneTodos`
    ])
  }
};
</script>

解释说明

1. Vuex Store:

   • 在 store.js 文件中，我们定义了一个 Vuex store，其中包含一个 todos 数组作为状态。
   • getters 中定义了一个名为 doneTodos 的 getter，它返回所有已完成的待办事项。

2. 组件使用 mapGetters:

   • 在 MyComponent.vue 文件中，我们通过 import { mapGetters } from 'vuex'; 引入了 mapGetters 函数。
   • 在 computed 属性中，使用 ...mapGetters(['doneTodos']) 将 doneTodos getter 映射到组件的计算属性中。
   • 这样，我们就可以在模板中直接使用 this.doneTodos 来访问 Vuex store 中的 doneTodos getter。

通过这种方式，我们可以更简洁地访问 Vuex store 中的 getter，而无需每次都手动调用 this.$store.getters.doneTodos。