Vue.js store 的 Vuex Classic 模式已弃用，将在 Nuxt 3 中删除

发布于08月28日

我有以下文件，无法找到警告"store 的classic 模式/已弃用，将在Nuxt 3中删除"的原因.只要得到那个恼人的警告，一切都正常.

nuxt存储了modules/data.js个文件.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存储了index.js个文件.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;

推荐答案

最后，在阅读了大量答案和博客后，我找到了解决方案.

Important:-忘记了你对vue中vuex模块的了解.jsapply.在nuxt中使用Vuex.js有点不同.

Solution:-努克斯.js让你有一个store目录，每个文件对应一个模块.只需直接在store中添加必要的文件，您无需创建文件，也无需将文件添加到存储区的"modules"目录中.index.js文件是一个特殊的文件，我们将在这里放置与模块无关的逻辑.

store/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;
  }
};

在项目中使用state

this.$store.data.loadedPosts

在项目中使用mutations

this.$store.commit('data/setPosts', [{id: '1',...}, {id: '2',...}]);

在项目中使用actions

this.$store.dispatch('data/setPosts', [{id: '1',...}, {id: '2',...}]);

在项目中使用getters

this.$store.getters['data/loadedPosts'];

Important References:-

观看这段视频Nuxt.js tutorial for beginners - nuxt.js vuex store
阅读这个博客Efficiently understanding and using Nuxt + Vuex

Vue.js store 的 Vuex Classic 模式已弃用，将在 Nuxt 3 中删除

推荐答案

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空，没有从.nuxt复制任何内容

Shopware 6，使用 vue-test-utils 进行Jest 测试：渲染模板上的意外行为

在 Vue 中删除自定义组件代码重复的方法？

有什么理由不在 vue3 中使用