Nuxt项目中在独立JS文件内导入Vuex Store失败的问题

• Nuxt的Vuex采用自动扫描注册机制：运行时会自动读取store目录下的所有JS文件，把每个文件导出的state、mutations、actions等字段组装为对应命名空间的模块，最终生成完整的全局store实例。这套自动生成的实例不会从空的@/store/index.js默认导出，因此直接通过import store from "@/store"导入时，拿到的是空对象。
• 直接导入@/store/dice.js时，该文件本身只导出了state、mutations等独立字段片段，没有做默认导出，也没有经过Nuxt的模块组装流程，自然拿不到完整的store模块内容，这也是控制台报"export 'default' (imported as '$store') was not found in '~/store/dice'"的原因。

方案1：通过Nuxt插件暴露全局可访问的store实例 #

这是适配Nuxt自动扫描机制最省事的方案，不需要改动现有store目录的文件结构：

• 在plugins/目录下新建expose-store.js文件，写入插件逻辑：

export default ({ store }) => {
  // 跨环境（客户端/服务端）挂载store到全局
  globalThis.$nuxtStore = store
}

• 在nuxt.config.js的plugins配置项中注册该插件：

plugins: [
  { src: '~/plugins/expose-store.js' }
]

• 后续在functions.js独立文件中，直接通过globalThis.$nuxtStore访问完整store结构即可，例如访问dice模块的状态、提交mutation的写法：

// functions.js 内部的函数示例
export function getDiceList() {
  // 注意：要在函数执行内部取store，不要在文件顶层赋值引用，避免初始化时序问题导致取到undefined
  return globalThis.$nuxtStore.state.dice.list
}

export function addDiceItem(text) {
  globalThis.$nuxtStore.commit('dice/add', text)
}

注意：由于插件是在项目初始化执行后、页面渲染前完成挂载的，必须等函数实际执行时再读取全局store变量，不能在JS文件顶层直接把store赋值给常量。

方案2：手动编写store初始化逻辑，显式导出store实例 #

如果希望直接通过import store from "@/store"拿到store，就需要取消Nuxt的全自动扫描，自己完成store的组装：

• 补全@/store/index.js的初始化代码：

import Vue from 'vue'
import Vuex from 'vuex'
import diceModule from './dice'

Vue.use(Vuex)

export default () => new Vuex.Store({
  modules: {
    dice: {
      namespaced: true,
      ...diceModule
    }
  }
})

• 对应修改@/store/dice.js的导出结构，改为默认导出完整模块内容：

export default {
  namespaced: true,
  state: () => ({
    list: []
  }),
  mutations: {
    add(state, text) {
      state.list.push({
        text,
        done: false
      })
    },
    remove(state, { todo }) {
      state.list.splice(state.list.indexOf(todo), 1)
    },
    toggle(state, todo) {
      todo.done = !todo.done
    }
  }
}

注意：手动在index.js中编写store初始化逻辑后，Nuxt将不再自动扫描store目录下的其他JS文件注册模块，所有后续新增的store模块都需要手动在index.js中引入注册。

方案3：通过函数传参注入store，降低耦合 #

这是解耦程度最高、最不容易出时序问题的方案，完全不需要改动现有store结构或注册插件：

• 把functions.js里需要访问store的函数，设计为接收store作为入参，不在文件内部主动获取store：

// functions.js 示例
export function getDiceList(store) {
  return store.state.dice.list
}

export function addDiceItem(store, text) {
  store.commit('dice/add', text)
}

• 在Vue组件中调用这类函数时，直接把组件可访问的this.$store作为参数传入即可：

<script>
import { getDiceList, addDiceItem } from '~/utils/functions.js'
export default {
  computed: {
    diceList() {
      // 调用时传入当前组件的$store
      return getDiceList(this.$store)
    }
  },
  methods: {
    handleAdd() {
      addDiceItem(this.$store, '新增条目')
    }
  }
}
</script>

这种方式没有全局变量污染，函数依赖关系清晰，后续做单元测试时也可以直接模拟store参数，不需要依赖真实的Nuxt运行环境。

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