前言

store 中的状态是响应式的，在组件中调用 store 中的状态仅需要在计算属性中返回即可

参考：

Vuex
Vuex - 组合式API

一、计算变量

vue2 和 vue3 选项式API

假设使用vuex定义了一个状态 isPhone，并通过 Getter 暴露出来

单个状态：

computed: {isPhone() {return this.$store.getters.isPhone}
}

多个可以通过 mapGetters 辅助函数：

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['isPhone','anotherGetter',// ...])// 如果你想将一个 getter 属性另取一个名字，使用对象形式// ...mapGetters({//   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`//   doneCount: 'doneTodosCount'// })}
}

vue3 组合式API

创建 computed 引用以保留响应性，这与在选项式 API 中创建计算属性等效：

import { computed } from 'vue'
import { useStore } from 'vuex'const $store = useStore()
// const isPhone = $store.getters.isPhone // 非响应式
const isPhone = computed(() => $store.getters.isPhone)

二、直接在模板中使用

vue 模板中可获取全局变量，如果全局引入了store示例，则无需再在 setup 中引入

<script setup>
</script>
<template><div>{{ $store.getters.isPhone }}</div>
</template>