Vuex 存取数据妙招，提高开发效率不在话下

前言

在 Vue.js 应用程序中，状态管理是一个重要且常见的问题。Vuex 是一个流行的状态管理工具，它可以帮助你集中管理应用程序的状态，并以一种可预测的方式处理状态变化。Vuex 提供了多种方法来存储和获取数据，包括使用辅助函数和在组件中直接存取数据。

使用辅助函数存取数据

Vuex 提供了三个辅助函数来帮助你存取数据：

• mapState()：将 store 中的状态映射到组件的计算属性。
• mapMutations()：将 store 中的 mutations 映射到组件的方法。
• mapActions()：将 store 中的 actions 映射到组件的方法。

使用这些辅助函数，你可以轻松地在组件中访问和修改 store 中的数据。例如，以下代码演示了如何使用 mapState() 来将 store 中的 count 状态映射到组件的计算属性：

import { mapState } from 'vuex'

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

然后，你就可以在组件的模板中使用 count 计算属性来访问 store 中的 count 状态：

<template>
  <div>
    Count: {{ count }}
  </div>
</template>

在组件中直接存取数据

除了使用辅助函数外，你也可以在组件中直接存取 store 中的数据。例如，以下代码演示了如何直接访问 store 中的 count 状态：

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    return {
      count: store.state.count
    }
  }
}

然后，你就可以在组件的模板中使用 count 数据来访问 store 中的 count 状态：

<template>
  <div>
    Count: {{ count }}
  </div>
</template>

总结

Vuex 提供了多种方法来存储和获取数据，包括使用辅助函数和在组件中直接存取数据。使用这些方法，你可以轻松地在组件中访问和修改 store 中的数据，从而提高开发效率。