vuex中Getter如何用

前言

在Vuex中，Getter是一种用于从store中获取状态的计算属性。Getter可以根据store中的状态进行计算或转换，然后将结果返回。Getter主要用于在组件中访问和使用store中的数据。

Getter的使用

要使用Getter，首先需要在Vuex的store模块中定义一个Getter函数。Getter函数接收两个参数，第一个参数是state，代表了当前模块的状态对象，第二个参数是其他Getter函数对象。

// 在Vuex的store模块中定义一个Getter函数
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, title: '任务1', completed: false },
      { id: 2, title: '任务2', completed: true },
      { id: 3, title: '任务3', completed: false }
    ]
  },
  getters: {
    // Getter函数接收state为参数，并返回根据state计算或转换后的结果
    completedTodos: state => {
      return state.todos.filter(todo => todo.completed)
    }
  }
})

在组件中使用Getter，可以通过this.$store.getters来访问Getter函数。Getter函数可以像计算属性一样在模板中使用，也可以在组件的方法中通过this.$store.getters来调用。

// 在组件中使用Getter
export default {
  computed: {
    completedTodos() {
      // 通过this.$store.getters访问Getter函数
      return this.$store.getters.completedTodos
    }
  },
  methods: {
    getTotalCompletedTodos() {
      // 在组件的方法中使用Getter函数
      const completedTodos = this.$store.getters.completedTodos
      return completedTodos.length
    }
  }
}

Getter的作用和规范

Getter的主要作用是将复杂的状态转换成易于理解和使用的数据，用于在组件中展示或执行一些逻辑。Getter的命名一般以get开头，使用驼峰命名法，以明确标识Getter的用途。

当state中的数据需要进行多次计算或转换时，可以使用Getter来避免代码的重复和冗余。Getter的结果会被缓存起来，只有在依赖的状态发生变化时才会重新计算。

除了在store模块中定义Getter外，还可以使用命名空间来避免不同模块间的Getter命名冲突。可以通过namespace选项来告知Vuex在使用Getter时查找正确的命名空间。

总结

Getter是Vuex中的一种计算属性，用于从store中获取状态。通过在store模块中定义Getter函数，并使用this.$store.getters在组件中访问Getter函数，可以方便地获取经过计算或转换后的状态。Getter的使用可以避免代码的重复和冗余，并提高代码的可读性和维护性。