Vue项目中Vuex在util引入，断点存在default

示例代码

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
……

Vue.use(Vuex);
export default new Vuex.Store({
	……
})

// src/utils/index.js
import store from '@/store' // 导入默认导出的 store
export async function getDict() {
    store.state.userInfo
    store.dispatch.saveDictData(dictData)
}

使用断点查看的时候store属性中存在default，如图：

1. 为什么 store.state 能访问到数据？

在 Vuex 中，new Vuex.Store() 创建的实例会 自动挂载 state 到根级别，即使你在代码中看到的是 export default 导出整个 Store 实例。
当你使用 import store from '@/store' 时，导入的其实是这个 Store 实例，而 state 是它的一个直接属性。

Store 实例的真实结构

// 通过 console.log(store) 查看实际结构
{
  state: { ... },      // 直接访问的状态树
  getters: { ... },    // 计算属性
  commit: fn,          // 调用 mutations 的方法
  dispatch: fn,        // 调用 actions 的方法
  // ... 其他内部属性
}

所以 store.state 是合法的访问方式，无需通过 default。

2. 为什么断点调试时看到的是 default？

这是 开发工具（如 Chrome DevTools）的显示问题：

• 当你在调试工具中查看 import store from '@/store' 时，工具会显示模块的默认导出（export default）为 default 属性。
• 但实际上，store 变量已经指向了 default 的内容（即 Store 实例），所以直接访问 store.state 是等效的。

示意图

// 实际导入后的 store 变量：
store = {
  state: { ... },      // 直接可用
  getters: { ... },
  // ...
}

// 调试工具可能显示为：
store = {
  default: {           // 这是模块的默认导出包装
    state: { ... },
    getters: { ... },
    // ...
  }
}

但 代码中直接写 store.state 仍然有效，因为 store 已经是解引用后的对象。

3. 正确访问方式

情况 1：直接访问 State

import store from '@/store'

// 正确：直接访问 store.state
const dictData = store.state.userInfo

4. 常见误区

错误尝试

// ❌ 错误！不需要通过 default
const dictData = store.default.state.userInfo

• 这种写法仅在调试工具中看到的结构里有效，实际代码中会报错。

为什么会混淆？

• 开发工具的显示可能让人误解需要访问 default，但 Babel/Webpack 在编译时已经处理了 export default 的引用。

总结

关键点：

1. import store from '@/store' 已经解引用了 default，直接使用 store 即可。
2. state 是 Store 实例的直接属性，无需深层访问。
3. 调试工具的显示可能具有误导性，以代码实际行为为准。