store/ 的 Vuex 经典模式已弃用，将在 Nuxt 3 中删除

Posted 2023-02-22

【中文标题】store/ 的 Vuex 经典模式已弃用，将在 Nuxt 3 中删除

【英文标题】：Vuex Classic mode for store/ is deprecated and will be removed in Nuxt 3

【发布时间】：2019-12-31 03:59:32

【问题描述】：

我有以下文件，但找不到警告“存储/的经典模式已弃用并将在 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
    ;

index.js 存储在 nuxt.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;

【参考方案1】：

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

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

解决方案：- Nuxt.js 让您拥有一个 store 目录，其中每个文件对应一个模块。只需在 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;
  
;

在项目中使用状态

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'];

重要参考：-

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

【讨论】：

...getters['data/loadedPosts'] / ...dispatch('data/setPosts') - Mr.Stark 我感觉不舒服.. 我的意思是说真的这是一个糟糕的语法.. 但你 100% 正确，这是 nuxt 的新协议，大错特错..

另一种方式是创建store/data/[actions.js, getters.js, mutations.js, state.js]，这样nuxt就会使用“data”文件夹作为模块。

只是不需要创建 index.js

【参考方案2】：

Nuxt 显示此警告是因为您使用的是经典的 vuex 存储，而不是“模块模式”。你可以在nuxt doc了解更多。