巧用 Vuex 实现前端状态管理

Vuex 中的 getters

在 Vuex 中，getters 是用来从 store 中获取数据的函数。它们类似于计算属性，但它们是在 store 中定义的，并且可以被组件访问。

getters 是非常有用的，因为它们可以帮助我们：

• 从 store 中获取数据，而无需直接访问 store 实例。
• 计算和派生数据，而无需在组件中编写额外的逻辑。
• 提高应用程序的性能，因为它们可以缓存数据，并避免重复计算。

如何使用 getters

要使用 getters，我们需要先在 store 中定义它们。我们可以使用 getters 对象来做到这一点。

const store = new Vuex.Store({
  getters: {
    // 定义一个 getter 来获取当前的用户名
    currentUser: state => state.user.name
  }
})

一旦我们定义了 getters，就可以在组件中使用它们。我们可以使用 mapState 和 mapGetters 辅助函数来做到这一点。

mapState

mapState 辅助函数可以让我们将 store 中的状态映射到组件的 data 对象中。例如：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'currentUser'
    ])
  }
}

这将把 currentUser getter 映射到组件的 data 对象中。现在，我们就可以在组件中使用 this.currentUser 来访问当前的用户名。

mapGetters

mapGetters 辅助函数可以让我们将 store 中的 getters 映射到组件的 computed 对象中。例如：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'currentUser'
    ])
  }
}

这将把 currentUser getter 映射到组件的 computed 对象中。现在，我们就可以在组件中使用 this.currentUser 来访问当前的用户名。

总结

getters 是 Vuex 中非常有用的工具，可以帮助我们从 store 中获取数据，计算和派生数据，以及提高应用程序的性能。通过使用 mapState 和 mapGetters 辅助函数，我们可以轻松地将 getters 映射到组件中，并使用它们来访问 store 中的数据。