Vue状态管理：什么是getters？Vuex中的getters有什么作用？

在Vuex中，getters 是用于对 store 中的状态进行派生或计算的一种方式。它类似于组件中的计算属性，允许你在获取 store 中的状态时进行一些逻辑操作，而不必每次都重复编写相同的计算逻辑。

Getters 的定义：

在 Vuex store 中，通过 getters 对象定义一系列的 getter 函数：

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

Getters 的作用：

1. 计算属性：

   • Getters 提供了一种类似于计算属性的方式来获取和处理 store 中的数据。你可以通过 getters 计算得到的值，而不必直接修改 store 的 state。

2. 派生状态：

   • Getters 允许你在 store 中派生出一些新的状态，这些状态可以基于已有的状态进行计算。这使得你可以在不直接修改 state 的情况下，得到一些经过处理的状态。

3. 可复用性和模块化：

   • Getters 可以在不同组件中重复使用，提高代码的可维护性和可复用性。它们也可以用于模块化，即将 getters 分开定义在不同的模块中，使代码更有组织性。

使用 Getters：

在组件中使用 getters，可以通过 mapGetters 辅助函数，也可以直接通过 this.$store.getters 访问。

// 使用 mapGetters
import {
    mapGetters } from 'vuex';

export default {
   
  computed: {
   
    ...mapGetters(['doneTodos']),
  },
  methods: {
   
    someMethod() {
   
      // 直接访问 getters
      const doneTodos = this.$store.getters.doneTodos;
    }
  }
};

通过使用 getters，你可以更灵活地对 store 中的状态进行处理，而不必直接修改 state。这有助于保持 store 的单一数据源的原则，同时提高代码的可维护性。