Vuex 计算属性：如何使用 getters 优化状态管理

在 Vuex 中，计算属性是一种派生状态，它的值是基于其他状态的值计算得出的。计算属性可以在组件中使用，类似于普通的数据属性。

使用计算属性的好处是，它们会根据依赖的状态的变化自动重新计算，而不需要手动更新。

在 Vuex 中，可以通过定义getters来创建计算属性。getters类似于组件中的计算属性，可以通过对状态进行计算来获取派生状态。

下面是一个使用计算属性的示例：

// 在 Vuex 的 store 中定义一个状态
state: {
  todos: [
    { id: 1, text: 'Learn Vue', done: true },
    { id: 2, text: 'Build an app', done: false },
    { id: 3, text: 'Deploy to production', done: false }
  ]
},

// 定义一个计算属性
getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}

在上面的示例中，我们定义了一个计算属性doneTodos，它基于todos状态进行计算，返回所有已完成的任务。

在组件中可以通过this.$store.getters.doneTodos来获取这个计算属性的值。

计算属性还可以接受参数，类似于组件中的带参计算属性。可以在getters中返回一个函数，然后在组件中使用时传入参数。

// 在 Vuex 的 store 中定义一个状态
state: {
  todos: [
    { id: 1, text: 'Learn Vue', done: true },
    { id: 2, text: 'Build an app', done: false },
    { id: 3, text: 'Deploy to production', done: false }
  ]
},

// 定义一个带参数的计算属性
getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

在上面的示例中，我们定义了一个带参数的计算属性getTodoById，它接受一个id参数，并根据id从todos状态中获取对应的任务。

在组件中可以通过this.$store.getters.getTodoById(id)来获取这个带参数的计算属性的值。