如何将 Vuex mapGetters 与 Vue 3 SFC 脚本设置语法一起使用? [英] How to use Vuex mapGetters with Vue 3 SFC Script Setup syntax?

问题描述

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法.起点:

I'm refactoring component from regular Vue 3 Composition API to Script Setup syntax. Starting point:

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

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

当前 Vue v3 迁移文档，SFC Composition API Syntax Sugar (< script setup >)，链接到此 RFC 页面:https://github.com/vuejs/rfcs/pull/182

Current Vue v3 migration documentation, SFC Composition API Syntax Sugar (< script setup >), links to this RFC page: https://github.com/vuejs/rfcs/pull/182

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

There is only one example for using computed reactive property:

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

由于目前没有可用的 Vuex 4 文档提到 ，我仍然不清楚我应该如何使用 mapGetters使用这种语法?或者使用 Vuex 4 解决这个问题的正确方法是什么?

As there is no current Vuex 4 documentation available that is mentioning <scrip setup>, it remains unclear to me how I should be using mapGetters when using this syntax? Or what is the correct way of going about this with Vuex 4?

推荐答案

到目前为止，这种语法似乎有效.但是，我希望 Vuex 能够开发一种更简洁的方式来为模板公开计算出的 getter.

So far this syntax seems to be working. However, I'm hoping that Vuex would develop a cleaner way for exposing computed getters for template.

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

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

export const name = 'MyCoolBareComponent';

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

这篇关于如何将 Vuex mapGetters 与 Vue 3 SFC 脚本设置语法一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！