3.x から 4.0 への移行 #

ほとんどすべての Vuex 4 の API は、Vuex 3 から変更されていません。しかし、修正が必要な破壊的変更がいくつかあります。

• 破壊的変更
  • インストール手順
  • TypeScript サポート
  • バンドルが Vue 3 に対応しました
  • "createLogger" 関数はコアモジュールからエクスポートされます
• 新機能
  • 新しい "useStore" 合成関数

破壊的変更 #

インストール手順 #

新しい Vue 3 の初期化の手順に合わせて、Vuex のインストール手順が変更されました。新しいストアを作成するには、新しく導入された createStore 関数を使用することが推奨されます。

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

VueインスタンスにVuexをインストールするには、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')

TypeScript サポート #

Vuex 4 は、issue #994 を解決するために、Vue コンポーネント内の this.$store のグローバルな型付けを削除します。TypeScript で使用する場合は、独自のモジュール拡張を宣言する必要があります。

次のコードをあなたのプロジェクトに配置して、this.$store が正しく型付けされるようにしてください。

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // ストアのステートを宣言する
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

詳細は、TypeScript サポート セクションをご覧ください.

バンドルが Vue 3 に対応しました #

以下のバンドルは、Vue 3 のバンドルに合わせて生成されます。

• vuex.global(.prod).js
  • ブラウザの <script src="..."> で直接使用します。Vuexのグローバルを公開しています。
  • グローバルビルドは UMD ではなく IIFE としてビルドされており、<script src="..."> での直接使用のみを想定しています。
  • ハードコードされた prod/dev ブランチが含まれており、prod ビルドはあらかじめ minify されています。本番環境では、.prod.js ファイルを使用してください。
• vuex.esm-browser(.prod).js
  • ネイティブの ES モジュールのインポート（<script type="module"> でブラウザをサポートするモジュールを含む）で使用されます。
• vuex.esm-bundler.js
  • webpack, rollup, parcel などのバンドラーで使用されます。
  • process.env.NODE_ENV のガードを持つ prod/dev ブランチを残します(バンドラーで置き換える必要があります)。
  • minify されたビルドは出荷されません（バンドル後に他のコードと一緒に行われます）。
• vuex.cjs.js
  • Node.js のサーバーサイドレンダリングで、require()を使って使用されます。

"createLogger" 関数はコアモジュールからエクスポートされます #

Vuex 3では、createLogger 関数は vuex/dist/logger からエクスポートされていましたが、現在は core パッケージに含まれています。この関数は vuex パッケージから直接インポートする必要があります。

import { createLogger } from 'vuex'

新機能 #

新しい "useStore" 合成関数 #

Vuex 4 では、Composition API でストアを操作するための新しい API が導入されました。合成関数の useStore を使って、コンポーネントの setup フック内でストアを取得することができます。

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

詳細は、Composition APIのセクションをご覧ください。