[英]Vuex Classic mode for store/ is deprecated and will be removed in Nuxt 3
我有以下文件,找不到警告“存储/经典模式已弃用,并将在Nuxt 3中删除的经典模式”的原因。 收到令人讨厌的警告,一切都很好。
nuxt.js存储中的modules / data.js文件。
const state = () => ({
loadedPosts: []
});
const mutations = {
setPosts(state, posts){
state.loadedPosts = posts;
}
};
const actions = {
setPosts(vuexContext, posts){
vuexContext.commit('setPosts', posts);
}
};
const getters = {
loadedPosts(state){
return state.loadedPosts;
}
};
export default {
state,
actions,
getters,
mutations
};
nuxt.js存储中的index.js文件。
import Vuex from 'vuex';
import data from "~/store/modules/data";
const createStore = () => {
return new Vuex.Store({
modules: {
data: {
namespaced: true,
...data
}
}
});
};
export default createStore;
最后,在阅读了很多答案和博客之后,我找到了解决方案。
重要说明:-忘记了您对vue.js应用程序中的vuex模块的了解。 在nuxt.js中使用Vuex有点不同。
解决方案:-通过 Nuxt.js,您可以拥有一个存储目录,其中每个文件都与一个模块相对应。 只需直接在商店中添加必要的文件,您无需创建文件并将其添加到商店中的' modules '目录。 index.js文件是一个特殊文件,这是我们放置与模块无关的逻辑的地方。
商店/data.js
export const state = () => ({
loadedPosts: []
});
export const mutations = {
setPosts(state, posts){
state.loadedPosts = posts;
}
};
export const actions = {
setPosts(vuexContext, posts){
vuexContext.commit('setPosts', posts);
}
};
export const getters = {
loadedPosts(state){
return state.loadedPosts;
}
};
在项目中使用状态
this.$store.data.loadedPosts
在项目中使用变异
this.$store.commit('data/setPosts', [{id: '1',...}, {id: '2',...}]);
在项目中使用动作
this.$store.dispatch('data/setPosts', [{id: '1',...}, {id: '2',...}]);
在项目中使用吸气剂
this.$store.getters['data/loadedPosts'];
重要参考:
Nuxt显示此警告,因为您使用的是经典vuex存储,而不是“模块模式”。 您可以在nuxt doc中了解更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.