Vue中Store Getter: 向Getter发送值

在Vue中使用Vuex进行状态管理时，Getter是获取Store中状态的一种方式。有时候，我们需要将某些值传递给Getter来返回特定的状态值。本文将介绍如何通过Vue Store Getter向Getter发送值，在Getter中执行相应的操作并返回特定的状态值。

Getter是什么？

Getter是Vuex中用于获取状态的函数。它类似于计算属性，当状态发生变化时会被重新计算。Getter可以接收其他Getter作为参数，因此它可以组合来计算复杂的状态。Getter可以在Store中定义，然后通过this.$store.getters访问。

定义一个Getter的示例代码如下：

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

在上面的示例中，我们定义了一个Getter函数doneTodos，它返回所有已完成的任务。

如何向Getter发送值

有时候，我们需要根据传递的值来计算Getter返回的状态值。此时，我们可以在Getter中定义一个函数，它接收需要的值作为参数。在Getter中执行相应的操作后，返回计算好的状态值。下面是一个示例代码：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false },
      { id: 3, text: 'Build something awesome', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

在上面的示例中，我们定义了一个Getter函数getTodoById，它接收一个id参数。在Getter中，我们使用find()函数查找具有指定id的任务，并返回它。现在，我们可以通过Getter来获取特定id的任务，示例代码如下：

this.$store.getters.getTodoById(2)

总结

在本文中，我们讲解了Vuex中Getter的基本概念。此外，我们还介绍了如何向Getter发送值，在Getter中进行操作并返回状态值。如果你想深入了解Vuex，推荐阅读Vuex官方文档。