vuex getter

// Vuex Getter 示例代码

// 定义 store
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习 JavaScript', done: true },
      { id: 2, text: '学习 Vue.js', done: false }
    ]
  },
  getters: {
    // getter 函数接收 state 作为第一个参数
    doneTodos: state => {
      // 返回已完成的 todos
      return state.todos.filter(todo => todo.done);
    },
    // getter 还可以接收其他 getter 作为第二个参数
    doneTodosCount: (state, getters) => {
      // 使用另一个 getter 的结果
      return getters.doneTodos.length;
    },
    // getter 可以通过属性访问
    getTodoById: (state) => (id) => {
      // 返回指定 id 的 todo
      return state.todos.find(todo => todo.id === id);
    }
  }
});

// 使用 getter
console.log(store.getters.doneTodos); // 输出已完成的 todos
console.log(store.getters.doneTodosCount); // 输出已完成的 todos 数量
console.log(store.getters.getTodoById(1)); // 输出 id 为 1 的 todo

解释说明：

• Vuex Getter 是用于从 store 中派生出一些状态，类似于计算属性。
• getters 可以接收 state 和其他 getter 作为参数。
• getters 的返回值会根据它的依赖被缓存起来，只有当依赖发生变化时才会重新计算。
• 可以通过 store.getters 来访问 getter。