如何在Vue 3 SFC脚本设置语法中使用Vuex mapGetters？

问题描述

我正在将常规Vue 3 Composition API的组件重构为Script Setup语法。起点：

<script lang="ts">
import { defineComponent,computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',computed: {
    ...mapGetters('auth',['isAdmin']),},});
</script>

当前Vue v3 migration documentation， SFC成分API语法糖（），链接到以下RFC页面：https://github.com/vuejs/rfcs/pull/182

只有一个使用计算的反应性的例子：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有Vuex 4文档提及<scrip setup>，因此我仍然不清楚使用这种语法时应如何使用mapGetters？还是使用Vuex 4解决此问题的正确方法是什么？

解决方法

到目前为止，该语法似乎仍然有效。但是，我希望Vuex能够开发出一种更干净的方式来公开模板的已计算吸气剂。

如果您知道更好的方法，我们很乐意听到！

<script setup lang="ts">
import { mapGetters } from 'vuex';

export const name = 'MyCoolBareComponent';

export default {
  computed: {
    ...mapGetters('user',['profile','roles']),},};
</script>

,

现在有更好的文档，简单的答案是：您不需要 mapGetters。

https://next.vuex.vuejs.org/guide/composition-api.html#accessing-state-and-getters

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const count = computed(() => store.getters.count)
</script>

如果你有很多 getter 想要变成“计算属性”，你可以使用像这样“直观”的东西：

const { countIsOdd,countIsEven } = Object.fromEntries(Object.keys(store.getters).map(getter => [getter,computed(() => store.getters[getter])]))

把它放到一个函数中，它甚至看起来不错。

const mapGetters = (getters) => {
  return Object.fromEntries(Object.keys(getters).map(getter => [getter,computed(() => getters[getter])]))
}

const { countIsOdd,countIsEven } = mapGetters(store.getters)

将该函数放入一个文件中并将其作为模块导出...

// lib.js
import { computed } from 'vue'
import { useStore } from 'vuex'

const mapGetters = () => {
  const store = useStore()
  return Object.fromEntries(Object.keys(store.getters).map(getter => [getter,computed(() => store.getters[getter])]))
}

export { mapGetters }

...而且您可以轻松地在所有组件中使用它。

// components/MyComponent.vue
<script setup>
import { mapGetters } from '../lib'

const { countIsOdd,countIsEven } = mapGetters()
</script>