[英]NuxtJs Vuex | Unexpected token when I trying to use ...mapGetters or ...mapActions
[英]use `mapActions` or `mapGetters` with Vuex 4 and Vue 3
有人知道如何在setup
function 中将mapState
或mapGetters
与Vue 3
一起使用吗? 我知道可以使用带有useStore
挂钩的商店,但是使用这个挂钩我们导入所有商店,同时使用mapState
或mapGetters
我们可以指定一个module
:
// ...
computed: {
...mapGetters('myModule', [
'myStateVariable'
]
)
//...
也许是这样的:
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,
};
},
};
使用 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,
}
每个模块中的吸气剂都是这样的:
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>
太好了,现在您可以使用命名空间的模块了!
在 vue3 样式 SFC 中使用mapActions
的最佳方法是在setup()
函数的return
中使用mapActions
import { mapActions } from "vuex"
setup() {
return {
...mapActions("myModule", ["doSomething"])
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.