Vue.js Vuex getter带参数

在本文中，我们将介绍如何在Vue.js的vuex中使用带参数的getter。Vuex是Vue.js的官方状态管理库，它可以帮助我们更好地组织和管理应用程序的状态。

什么是Vuex？

Vuex是一个用于Vue.js应用程序的状态管理模式。它采用集中式存储管理应用程序的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。

Vuex包含了四个核心概念：state，mutations，actions和getters。在本文中，我们将重点关注getter的使用。

Getter的作用

Getter用于从store中的state中派生出一些状态，类似于Vue实例中的计算属性。它们可以接受其他getter作为第二个参数，并可以带有参数。

Getter具有以下优点：
– Getter允许我们在组件中使用派生出来的状态，而不需要重复计算。
– Getter可以让我们从不同的角度获取state的数据，而不需要更改它。这样可以避免频繁更新state。
– Getter可以对state进行过滤和排序，以便将处理后的结果传递给组件，而不是原始的未经处理的state。

在Vuex中定义getter

在Vuex中，我们可以使用getters属性来定义getter。以下是一个示例：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习Vue.js', done: true },
      { id: 2, text: '写一篇博客', done: false },
      { id: 3, text: '参加编程比赛', done: false }
    ]
  },
  getters: {
    completedTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    todosCount: (state, getters) => {
      return getters.completedTodos.length;
    },
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id);
    }
  }
});

在上面的示例中，我们定义了三个getter，分别是completedTodos，todosCount和getTodoById。

completedTodos getter返回所有已完成的todo项。
todosCount getter返回已完成的todo项的数量。
getTodoById getter接受一个参数id，并返回匹配的todo项。

在组件中使用getter

在Vue组件中，我们可以通过this.$store.getters访问定义的getter。以下是一个使用getter的示例：

<template>
  <div>
    <h2>已完成的任务</h2>
    <ul>
      <li v-for="todo in completedTodos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    <p>已完成的任务数量：{{ completedTodosCount }}</p>
    <p>{{ getTodoById(2).text }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    completedTodos() {
      return this. $store.getters.completedTodos; }, completedTodosCount() { return this.$ store.getters.todosCount;
    },
    getTodoById() {
      return this.$store.getters.getTodoById;
    }
  }
};
</script>

在上面的示例中，我们使用了this.$store.getters访问getter，并将其绑定到组件中的计算属性上。然后，我们可以在模板中使用这些计算属性来显示相应的数据。

使用带参数的getter

有时我们需要根据传入的参数来派生状态。在Vuex中，我们可以通过在getter中返回一个函数来实现这一点。以下是一个使用带参数的getter的示例：

// store.js
// ...
  getters: {
    // ...
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id);
    },
    getTodosByStatus: (state) => (status) => {
      return state.todos.filter(todo => todo.done === status);
    }
  }
// ...

在上面的示例中，我们在getTodoById中返回一个函数，该函数接受一个参数id，并返回匹配的todo项。同样，getTodosByStatus也是返回一个匹配状态的todo项的函数。

在组件中使用带参数的getter与使用普通getter相似。例如，我们可以通过以下方式在组件中使用getTodoById和getTodosByStatus：

<template>
  <div>
    <p>{{ getTodoById(2).text }}</p>
    <ul>
      <li v-for="todo in getTodosByStatus(false)" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    getTodoById() {
      return this. $store.getters.getTodoById; }, getTodosByStatus() { return this.$ store.getters.getTodosByStatus;
    }
  }
};
</script>

在上面的示例中，我们可以通过传递参数来调用getTodoById和getTodosByStatus来获取匹配的todo项。