Vuex 在挂载中获取数据 - JavaScript

在 Vue 应用程序中，Vuex 是处理共享状态的最佳方式。Vuex 利用了一个全局数据存储区，称为 Vuex 存储区，用于存储应用程序全局状态，并使其易于访问和管理。

在这篇文章中，我们将讨论在挂载期间如何访问 Vuex 存储区数据。

在组件中挂载 Vuex 存储区

以下是在组件中挂载 Vuex 存储区的示例代码：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getSampleData'
    ])
  },
  mounted () {
    console.log(this.getSampleData)
  }
}

这里使用了 Vuex 提供的 mapGetters 辅助函数将 getSampleData getter 映射到组件的计算属性中。

在组件挂载完成后，我们可以使用 this.getSampleData 访问 getSampleData getter 中的数据。

获取存储区对象

如果要访问整个存储区对象，我们可以使用 mapState 辅助函数，如下所示：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      sampleData: state => state.sampleData
    })
  },
  mounted () {
    console.log(this.sampleData)
  }
}

在这里，我们调用了 mapState 辅助函数，将 sampleData 对象从存储区映射到组件的计算属性中。

在组件挂载完成后，我们可以使用 this.sampleData 访问整个 sampleData 对象。

从其他组件获取数据

如果要从另一个组件访问 Vuex 存储区的数据，我们可以使用 this.$store.getters 属性。以下是示例代码：

export default {
  methods: {
    handleClick () {
      console.log(this.$store.getters.getSampleData)
    }
  }
}

在此示例中，我们使用 this.$store.getters.getSampleData 方法访问另一个组件中的 getSampleData getter 中的数据。

结论

在这篇文章中，我们讨论了在组件挂载期间如何访问 Vuex 存储区的数据。我们介绍了 mapGetters 和 mapState 辅助函数，以及从其他组件访问数据的方法。如果您正在使用 Vuex 管理您的应用程序的全局状态，希望这篇文章能够帮助您更好地了解如何访问存储区中的数据。