商店/的Vuex Classic模式已棄用，並將在Nuxt 3中刪除

Question

我有以下文件，找不到警告“存儲/經典模式已棄用，並將在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;

Answer 1

最后，在閱讀了很多答案和博客之后，我找到了解決方案。

重要說明：-忘記了您對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'];

重要參考：

1. 觀看此視頻Nuxt.js初學者教程-nuxt.js vuex商店
2. 閱讀此博客有效了解和使用Nuxt + Vuex

Answer 2

Nuxt顯示此警告，因為您使用的是經典vuex存儲，而不是“模塊模式”。 您可以在nuxt doc中了解更多信息。