示例代码
// 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.userInfostore.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的引用。
总结
| 你看到的（调试工具） | 实际代码中的写法 |
|---|---|
store.default.state | store.state |
| 这是模块导出的显示 | 直接访问实例属性 |
关键点：
import store from '@/store'已经解引用了default，直接使用store即可。state是 Store 实例的直接属性，无需深层访问。- 调试工具的显示可能具有误导性，以代码实际行为为准。
