3.x から 4.0 への移行

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

破壊的変更

インストール手順

新しい 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')

注意

厳密にはこれは破壊的変更ではなく、まだ new Store(...) 構文を使用することができますが、Vue 3 と Vue Router Next に合わせるためにこの方法を推奨します。

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のセクションをご覧ください。