如何从VUEX中获取模块状态道具作为单个计算的道具(不是作为对象的道具)?
我有一个带有单个模块的状态:
const charactersModule = {
state: () => ({
characters: [],
isLoading: false,
totalPages: 0,
currentPage: 1,
itemsPerPage: ITEMS_PER_PAGE,
}),
getters: {},
mutations: {},
actions: {
async getCharacters({state}, page = state.currentPage) {
try {
state.isLoading = true;
const res = await fetch(`${BASE_URL}character/?page=${page}`);
if (res.ok) {
const { info, results } = await res.json();
state.characters = results;
}
} catch (e) {
console.log(e);
} finally {
state.isLoading = false;
}
},
},
};
export default createStore({
modules: {
characters: charactersModule,
},
});
然后在sfc中:
// some component
...
methods: {
...mapActions(['getCharacters']),
}
computed: {
...mapState(['characters'])
},
mounted() {
this.getCharacters()
},
我希望在此SFC内部我可以访问计算的属性:字符,isloading,totalpapges,currentpage和ittemperpage 。我实际上从... MapState([''''])是一个具有所有这些道具的对象,但是我需要将它们作为单个计算的道具(不是作为对象的一部分)。我该怎么做?
I have a state with single module:
const charactersModule = {
state: () => ({
characters: [],
isLoading: false,
totalPages: 0,
currentPage: 1,
itemsPerPage: ITEMS_PER_PAGE,
}),
getters: {},
mutations: {},
actions: {
async getCharacters({state}, page = state.currentPage) {
try {
state.isLoading = true;
const res = await fetch(`${BASE_URL}character/?page=${page}`);
if (res.ok) {
const { info, results } = await res.json();
state.characters = results;
}
} catch (e) {
console.log(e);
} finally {
state.isLoading = false;
}
},
},
};
export default createStore({
modules: {
characters: charactersModule,
},
});
Then in SFC:
// some component
...
methods: {
...mapActions(['getCharacters']),
}
computed: {
...mapState(['characters'])
},
mounted() {
this.getCharacters()
},
I expect that inside this SFC I can access computed properties: characters, isLoading, totalPapges, currentPage and itemsPerPage. What I actually get from ...mapState(['characters']) is an object with all this props, but I need to get them as single computed props (not as part of an object). How can I do this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试使用
createNamespacedHelpers
通过模块名称的前缀来帮助您的状态:Try to use
createNamespacedHelpers
help to get your state with prefixing them by the module name: