时间戳

首页 > 解决方案 > store/ 的 Vuex Classic 模式已弃用，将在 Nuxt 3 中删除

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

问题描述

我有以下文件，找不到警告“存储/的经典模式已弃用并将在 Nuxt 3 中删除”的原因。一切正常，只是得到那个烦人的警告。

modules/data.js文件存储在 nuxt.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.jsvuexnuxt.js

解决方案

最后，在阅读了很多答案和博客后，我找到了解决方案。

重要提示：-忘记了您对 vue.js 应用程序中的 vuex 模块的了解。在 nuxt.js 中使用 Vuex 有点不同。

解决方案：- Nuxt.js 让您拥有一个存储目录，其中每个文件对应于一个模块。只需在商店中直接添加必要的文件，您无需创建文件并将文件添加到商店中的“模块”目录。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',...}]);

在项目中使用getter

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

重要参考：-

  1. 观看此视频Nuxt.js 初学者教程 - nuxt.js vuex 商店
  2. 阅读此博客高效理解和使用 Nuxt + Vuex

推荐阅读