Vuex 4 官方版本正式發布。

Vuex 4 的重點是兼容性。Vuex 4 支持 Vue 3，但是仍然提供了與 Vuex 3 完全相同的 API，因此用戶可以在 Vue 3 中直接復用他們現有的 Vuex 代碼。

下文會把破壞性的改動列出來，請注意查看。

在源碼的 example 文件夾^[1]可以看到 Optional 和 Composition API 下的基本用法。

它仍然和 Vue 3 一樣在 NPM 包的 next 標簽下發布，我們計劃在 Vue3 準備好的時候移除 next 標簽。

為了 Vuex 4 的穩定發布，大家齊心協力做出了很多貢獻。非常感謝你們的幫助。若不是有如此出色的 Vue 社區，根本不可能實現這一切！

文檔

請訪問 next.vuex.vuejs.org^[2] 查看文檔。

破壞性變動

安裝流程更改

為了和 Vue3 的初始化流程一致，Vuex 的安裝流程有所改動。

我們建議用戶用新的 createStore 函數來建立一個 store 實例。

import?{?createStore?}?from?"vuex";export?const?store?=?createStore({state()?{return?{count:?1,};},
});

同時這在技術上并不是一個破壞性的改動，你依然可以用 new Store(...) 語法，不過我們推薦你用新語法，這樣可以和 Vue3 以及 Vue Router 4 保持一致。

在 Vue 實例上安裝 Vuex，傳遞 store 即可。

import?{?createApp?}?from?"vue";
import?{?store?}?from?"./store";
import?App?from?"./App.vue";const?app?=?createApp(App);app.use(store);app.mount("#app");

構建產物和 Vue3 一致

以下的構建產物可以和 Vue3 的產物保持一致：

• vuex.global(.prod).js

• • 直接在瀏覽器中使用 <script src="...">，暴露全局 Vuex 變量。

  • 全局構建會被打包成 IIFE，并不是 UMD，僅用于直接使用 <script src="..."> 引入。

  • 包含了硬編碼的 prod/dev 分支判斷，prod.js 是壓縮后的，在生產環境記得使用這個文件。

• vuex.esm-broswer(.prod).js

• • 為了使用 native ES module imports（需要瀏覽器支持 es module 用法，<script type="module">）

• vuex.esm-bundler.js

• • 為了通過 webpack, rollup, percel 等構建工具使用模塊。

  • 保留 prod/dev 分支判斷和 process.env.NODE_ENV 判斷（這個變量需要被構建工具替換）

  • 并不會提供 minified 版本（構建工具可以引入后一起處理）

• vuex.cjs.js

• • 為了使用 Node.js 服務端渲染時通過 require() 導入。

類型 ComponentCustomProperties

Vuex 4 移除了為了推導 this.$store 而編寫的全局類型，解決了 issue #994^[3]，在使用 TypeScript 時，你必須自己手動添加模塊類型聲明。

在項目中使用如下的代碼，this.$store 就可以正確推導：

//?vuex-shim.d.ts
import?{?ComponentCustomProperties?}?from?"vue";
import?{?Store?}?from?"vuex";declare?module?"@vue/runtime-core"?{//?Declare?your?own?store?states.interface?State?{count:?number;}interface?ComponentCustomProperties?{$store:?Store<State>;}
}

核心模塊中導出 createLogger 函數

在 Vuex 3 中, createLogger 函數從 vuex/dist/logger 中導出，現在它被包含在核心包中了，你可以直接這樣導入：

import?{?createLogger?}?from?"vuex";

自 4.0.0-rc.2 以來的 Bug 修復

• 未導出 storeKey(4ab2947^[4])

• 修復 webpack 中 tree shaking 未生效 (#1906^[5]) (#1907^[6]) (aeddf7a^[7])

原文發布地址

https://github.com/vuejs/vuex/releases/tag/v4.0.0

參考資料

[1]

源碼的 example 文件夾: https://github.com/vuejs/vuex/tree/v4.0.0/examples

[2]

next.vuex.vuejs.org: https://next.vuex.vuejs.org/

[3]

issue #994: https://github.com/vuejs/vuex/issues/994

[4]

4ab2947: https://github.com/vuejs/vuex/commit/4ab294793a2c20ea6040f01f316618682df61fff

[5]

#1906: https://github.com/vuejs/vuex/issues/1906

[6]

#1907: https://github.com/vuejs/vuex/issues/1907

[7]

aeddf7a: https://github.com/vuejs/vuex/commit/aeddf7a7c618eda7f316f8a6ace8d21eb96c29ff

推薦閱讀

若川知乎高贊：有哪些必看的 JS庫？
我在阿里招前端，我該怎么幫你？（現在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？

末尾

你好，我是若川，江西人，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

1. 關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"1"，可加群長期交流學習

2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

3. 覺得文章不錯，可以?分享、點贊、在看?呀^_^另外歡迎留言交流～

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找