示例代碼

// 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
這是模塊導出的顯示	直接訪問實例屬性

關鍵點：

1. import store from '@/store' 已經解引用了 default，直接使用 store 即可。
2. state 是 Store 實例的直接屬性，無需深層訪問。
3. 調試工具的顯示可能具有誤導性，以代碼實際行為為準。