Nuxt对接Laravel API时Vuex store模块化配置异常问题排查

问题复现 #

目标是在store目录下拆分分类、事件两个独立数据集模块，实现两类列表的独立状态管理。
初始单模块逻辑写在store/index.js中可正常运行，代码如下：

export const state = () => ({
    categories: []
  })
  
  export const getters = {
    categories (state) {
      return state.categories
    }
  }
  
  export const mutations = {
    SET_CATEGORIES (state, categories) {
      state.categories = categories
    }
  }
  
  export const actions = {
    async nuxtServerInit({ commit, dispatch }) {
      let response = await this.$axios.$get('categories')
  
      commit('SET_CATEGORIES', response.data)
    }
  }

第一次拆分时，将分类逻辑移到新建的store/category.js，同时把index.js改为手动实例化Vuex Store的写法：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import category from './category'

export default new Vuex.Store({
  modules: {
    category
  }
})

运行后抛出错误Cannot read properties of undefined (reading 'getters')。
第二次参考文档片段修改index.js，仅导入模块、在根state声明category字段：

import category from './category'

export const state = () => ({
    category: []
})

错误消失但接口数据无法正常写入状态，写法不符合模块化逻辑，多次调整无效。 #

根因说明 #

报错和数据不生效的核心原因是混用了普通Vue项目的Vuex写法和Nuxt内置的Vuex规则：

• Nuxt2 对store目录做了内置自动处理，禁止手动new Vuex.Store实例，手动实例化会覆盖Nuxt预初始化的Store上下文，导致内部getters、commit方法找不到挂载点，抛出undefined错误。
• Nuxt会自动扫描store目录下的js文件，按文件名注册为带命名空间的子模块，不需要手动import引入。
• nuxtServerInit是Nuxt专属的根级action，仅能在store/index.js中定义，写在子模块不会被执行。

正确实现步骤 #

1. 修正store/index.js，删除所有手动实例化Store、手动引入子模块的代码，仅保留根级状态和根级action：

   // 不需要import Vue/Vuex，不需要import子模块
   export const state = () => ({
     // 全局共享的根状态放这里，没有可以留空
   })
   
   export const actions = {
     // nuxtServerInit只能写在这里
     async nuxtServerInit({ dispatch }) {
       // 调用子模块action必须加模块名前缀
       await dispatch('category/fetchList')
       // 后续新增事件模块后，直接在这里dispatch对应初始化方法即可
       // await dispatch('event/fetchList')
     }
   }
   

2. 调整store/category.js为标准子模块格式，不需要额外加命名空间配置，Nuxt自动按文件名注册命名空间：

   export const state = () => ({
     list: []
   })
   
   export const getters = {
     list: (state) => state.list
   }
   
   export const mutations = {
     SET_LIST (state, data) {
       state.list = data
     }
   }
   
   export const actions = {
     async fetchList({ commit }) {
       const res = await this.$axios.$get('categories')
       commit('SET_LIST', res.data)
     }
   }
   

3. 后续新增事件列表模块，直接新建store/event.js，和category.js结构一致即可，不需要修改index.js的任何代码。

排查校验点 #

• 页面中调用子模块状态/方法时，必须带命名空间前缀：
  • 取状态：this.$store.state.category.list
  • 取值getter：this.$store.getters['category/list']
  • 提交mutation：this.$store.commit('category/SET_LIST', data)
  • 触发action：this.$store.dispatch('category/fetchList')
• 检查所有store目录下的文件，没有出现new Vuex.Store的写法，所有模块都是通过export const state/getters/mutations/actions的方式导出。
• 不要在子模块中定义nuxtServerInit，服务端初始化逻辑统一收口到index.js的actions中。

内容的提问来源于stack exchange，提问作者Dustin