在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`答案

【问题标题】：use `mapActions` or `mapGetters` with Vuex 4 and Vue 3在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`
【发布时间】：2020-11-22 18:29:42
【问题描述】：

有人知道如何在setup 函数中使用mapState 或mapGetters 和Vue 3 吗？我知道可以使用带有useStore 钩子的商店，但是使用这个钩子我们导入所有商店，而使用mapState 或mapGetters 我们可以指定module：

// ...

computed: {
   ...mapGetters('myModule', [
      'myStateVariable'
   ]
) 

//...

【问题讨论】：

...mapGetters({myGetter: "myModule/myStateVariable"})你是这个意思吗？
我想和一个模块一起使用
@Ady642 试试这个blog.codecourse.com/using-vuex-with-the-vue-composition-api

标签： javascript vue.js vuex vuejs3

【解决方案1】：

使用 vue 3 和 vuex 4 我设法做到了：假设我们有一个如下所示的商店：

我们的一般商店 index.js（底部的那个）会是这样的：

 import { createStore,     createLogger   } from 'vuex';
 import module1 from '@/store/module1';
 import module2 from '@/store/module2';


 export default createStore({

 modules: {
    module1: module1,
    module2: module2,
 },
  plugins: process.env.NODE_ENV !== 'production'
  ? [createLogger()]
  : []
})

而每个模块都有这样的 index.js：

import * as getters from './getters'
import * as actions from './actions'
import mutations from './mutations'


const state = {
  postId: 10111,
}

export default {
  namespaced: true,

  state,
  getters,
  actions,
  mutations,
  
}

每个模块中的 getter 都是这样的：

export const getPostId = state => {
   return state.postId 
}

最后在一个组件中，您可以像这样访问 getter：

<template>
 <div>
   <div class="major_container">
     <p>{{ postIdFromModule1 }}</p>
     <p>{{ postIdFromModule2 }}</p>
  </div>
</div>
</template>
<script> 
import { computed } from "vue";
import { useStore } from "vuex";

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

   const postIdFromModule1 = computed(() => store.getters["module1/getPostId"]);
   const postIdFromModule2 = computed(() => store.getters["module2/getPostId"]);

   return {
     postIdFromModule1,
     postIdFromModule2,
   };
  },
};
</script>

太好了，现在您可以使用命名空间的模块了！

【讨论】：

是的，这是一个正确的答案，但您不使用助手。我创建了自己的助手来解决这个问题： const { isTokenSet } = useAuthModuleHelpers();
你是对的，我刚刚提交了答案，以便使用 vue 3 和 vuex 4 的整个模块化命名空间存储配置将在线。我浪费了很多时间来让它运行起来，如果能让下一个免于麻烦就好了。

【解决方案2】：

大概是这样的：

import { computed }  from 'vue';
import { useStore } from 'vuex';

const module = 'myModule';

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

        return {
            // getter
            one: computed(() => store.getters[`${module}/myStateVariable`],

            // state
            two: computed(() => store.state[module].myStateVariable,
        };
    },
};

【讨论】：

是的，这是工作，但你不使用任何助手。例如，要调用一个动作，您将需要使用 dispatch。这就是我一直在寻找的 useActions 和 useGetters ：blog.codecourse.com/using-vuex-with-the-vue-composition-api
@Ady642 希望这将很快登陆：github.com/vuejs/vuex/issues/1725

【解决方案3】：

据我所知，它们会变平，因此您不能使用 myModule/myStateVariable，但 myStateVariable 应该可以使用。

这可能会随着 Vuex 进入 RC 版本而改变，但现在如果你尝试使用相同的 getter 两次，你会得到这个错误

【讨论】：