【Vuejs】866- Vuex 4 正式發佈：打包現在與 Vue 3 一致

    作者 | Vuex 官方博客

譯者 | 王強

策劃 | 李俊辰   來源 | 前端之巔

Vuex 是一個專門爲 Vue.js 應用程序開發的狀態管理模式。Vuex 採用集中式存儲管理應用的所有組件組件的狀態。換句話說，Vuex 就是幫開發者存儲多個組件共享的數據，方便開發者對其讀取的更改的工具。

Vuex 4 正式版本現已發佈。

Vuex 4 的改進重點是兼容性。Vuex 4 支持 Vue 3，並提供了與 Vuex 3 完全相同的 API，因此用戶可以在 Vue 3 中重用現有的 Vuex 代碼。

這個版本還包含一些重大更改，詳情見後文。

關於 Option 和 Composition API 的基本用法，請參見 example 目錄。

新版還是用 NPM 包發佈，放在 next 標籤下，和 Vue 3 是一樣的。我們計劃在 Vue 3 拿掉 next 標籤後一併移除 Vuex 4 的 next 標籤。

社區爲 Vuex 4 的穩定版做出了許多貢獻，感謝大家的幫助。

    文檔    

要查看文檔，請訪問：

next.vuex.vuejs.org

重大更改

安裝流程已更改

爲了與新的 Vue 3 初始化流程保持一致，Vuex 的安裝流程已更改。

用戶要創建新的 store 實例時，推薦使用新引入的 createStore 函數。

import { createStore } from 'vuex'
export const store = createStore({
  state() {
    return {
      count: 1
    }
  }
})

從技術上來講這並不是一個重大更改，不過你還是可以使用 newStore(...) 語法，我們建議大家用這種方法來和 Vue 3、Vue Router 4 保持一致。

要將 Vuex 安裝到 Vue 實例，請傳遞 store 實例（而不是 Vuex）。

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

打包現在與 Vue 3 一致

新版會生成以下包，以同 Vue 3 包一致：

• vuex.global(.prod).js

• 在瀏覽器中直接用於<scriptsrc="...">。全局公開 Vuex。

• 全局構建是作爲 IIFE 而不是 UMD 構建的，並且只能與<scriptsrc="...">直接共用。

• 包含硬編碼的 prod/dev 分支，並且 prod 構建已預先最小化。使用.prod.js 文件用於生產。

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

• 用於原生 ES 模塊導入（包括通過< script type="module">支持模塊的瀏覽器。）

• vuex.esm-bundler.js

• 用於 webpack、rollup 和 parcel 等打包器。

• 帶有 process.env.NODE_ENV 防護的 prod/dev 分支不受影響（必須由打包器代替）。

• 不提供縮小的構建（打包後與剩餘代碼一起處理）。

• vuex.cjs.js

• 用於帶有 require() 的 Node.js 服務端渲染。

ComponentCustomProperties 的類型化

Vuex 4 刪除了其在 Vue 組件中 this.$store 的全局類型，以解決問題 #994。與 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 導出的，但它現在已包含在覈心包中。你應該直接從 vuex 包導入該函數。

import { createLogger } from 'vuex'

4.0.0-rc.2 後加入的錯誤修復

• 導出缺少的 storeKey（4ab2947）

• 修復在 Webpack 包中無法搖樹的問題（#1906）（#1907）（aeddf7a）

 延伸閱讀

https://github.com/vuejs/vuex/releases

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計模式 重溫系列（9篇全）

4.  正則 / 框架 / 算法等 重溫系列（16篇全）

5.  Webpack4 入門（上） ||  Webpack4 入門（下）

6.  MobX 入門（上）  ||   MobX 入門（下）

7. 100 +篇原創系列彙總

回覆“加羣”與大佬們一起交流學習~

點擊“閱讀原文”查看 100+ 篇原創文章

本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。