在 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
函数中使用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
【参考方案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 两次,你会得到这个错误
【讨论】:
以上是关于在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`的主要内容,如果未能解决你的问题,请参考以下文章
在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`
在 Vue 3 中使用 Vuex 4 模块和 TypeScript,以及如何修复循环依赖 linting 错误?