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

Posted

技术标签:

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

有人知道如何在setup 函数中使用mapStatemapGettersVue 3 吗? 我知道可以使用带有useStore 钩子的商店,但是使用这个钩子我们导入所有商店,而使用mapStatemapGetters 我们可以指定module

// ...

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

//...

【问题讨论】:

...mapGetters(myGetter: "myModule/myStateVariable")你是这个意思吗? 我想和一个模块一起使用 @Ady642 试试这个blog.codecourse.com/using-vuex-with-the-vue-composition-api 【参考方案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。这就是我一直在寻找的 useActionsuseGetters :blog.codecourse.com/using-vuex-with-the-vue-composition-api @Ady642 希望这将很快登陆:github.com/vuejs/vuex/issues/1725【参考方案3】:

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

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

【讨论】:

以上是关于在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`的主要内容,如果未能解决你的问题,请参考以下文章

VueVuex概念和基本使用

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

Vue-vue中的AjaxVuex路由及UI组件库

在 Vue 3 中使用 Vuex 4 模块和 TypeScript,以及如何修复循环依赖 linting 错误?

如何在 Vue 3 组件中使用 Vuex 4 状态数据作为另一个调度的有效负载?

Vue3.0全家桶最全入门指南 - vue-router@4.x和vuex@4.x (3/4)