Vuex 4 正式發佈

喜歡就關注咱們吧！

Vuex 4 已正式發佈，此版本的更新重點是提供更好的兼容性。從 release note 能夠看到，Vuex 4 不但支持 Vue 3，而且提供與 Vuex 3 徹底相同的 API，所以用戶能夠在 Vue 3 中重用其現有的 Vuex 代碼。

雖然 Vuex 4 將兼容性放在了首位，但此版本依舊包括部分破壞性變化，下邊簡單介紹一下。

安裝過程已更改

爲了與新的 Vue 3 初始化過程保持一致，Vuex 的安裝過程已更改。舉個例子，若是須要建立一個新的 store 實例，如今會鼓勵用戶使用新引入的createStore功能。

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

儘管從技術上來說這並非一個破壞性變化，開發者仍可使用new Store(...)語法，但官方表示建議將該方法與 Vue 3 和 Vue Router 4 保持一致。

要將 Vuex 安裝到一個 Vue 實例，須要傳遞實例而非 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

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

• vuex.esm-bundler.js

• vuex.cjs.js

ComponentCustomProperties類型化

Vuex 4 刪除其this.$store在 Vue Component 中的全局類型以解決 issue #994。與 TypeScript 一塊兒使用時，必須聲明本身的模塊擴充 (module augmentation)。

將如下代碼放在項目中以容許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'

此外還包括兩個 Bugfix：

• 修復導出缺乏storeKey的錯誤(4ab2947)

• 修復 webpack 包中的 tree shaking 沒法運行的錯誤 (#1906) (#1907) (aeddf7a)

下載地址：https://github.com/vuejs/vuex/releases/tag/v4.0.0