v3.x のドキュメントを見たい場合はこちら

ガイド

v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

Vuex 0.6.x から 1.0 への移行

最終更新日: 2020年5月9日

Vuex 2.0 はリリースされましたが、このガイドは 1.0 への移行だけをカバーしているのでしょうか？間違いでしょうか？Vuex 1.0 と2.0 が同時にリリースされたようですが、どういうことでしょうか？どっちを使用すると、Vue 2.0 と互換性があるでしょうか？

Vuex 1.0 と 2.0 の両方は:

しかしながら、ターゲットユーザーはわずかに異なります。

Vuex 2.0 は、新しいプロジェクトを開始やクライアント側の状態管理の最先端を目指したりするための、API の根本的な再設計と単純化したものです。もし、それについてもっと学びたいならば、これはこの移行ガイドではカバーされないため詳細については、Vuex 2.0 ドキュメント を参照してください。

Vuex 1.0 はほとんど下位互換性があるため、アップグレードするための変更はほとんど必要ありません。既存の大規模なコードベースを持つ人、または Vue 2.0 への最もスムーズなアップグレードパスが必要な人にはおすすめです。このガイドは、そのプロセスを容易にすることを目的としていますが、移行に関する注意事項のみを含んでいます。完全な使い方については Vuex 1.0 ドキュメント を参照してください。

文字列プロパティパスによる store.watch 置き換え

store.watch は関数を受け付けるようになりました。たとえば、次のように置き換える必要があります:

store.watch('user.notifications', callback)

は以下により:

store.watch(
  // 返された結果が変更されたとき...
  function (state) {
    return state.user.notifications
  },
  // このコールバックを動かす
  callback
)

これにより、リアクティブをより完全に制御することができます。

移行ガイド

コードに対し 移行ヘルパー を実行し 最初の引数として文字列による store.watch が呼び出される箇所を検出してください。

store のイベントエミッタ 削除

store インスタンスは、イベントエミッタインタフェース (on、off、emit) を公開しなくなりました。以前に store をグローバルイベントバスとして使用していた場合は、移行手順については、こちらのセクション を参照してください。

このインターフェイスを使用して store 自体が発行する監視イベント (例 store.on('mutation', callback)) の代わりに、新しいメソッド store.subscribe が導入されています。プラグインの典型的な使い方は次のとおりです:

var myPlugin = store => {
  store.subscribe(function (mutation, state) {
    // 何かの処理 ...
  })
}

より詳細については、プラグインのドキュメント の example を参照してください。

移行ガイド

コードに対し 移行ヘルパー を実行し、store.on、store.off、store.emitが呼び出される箇所を検出してください。

ミドルウェア 置き換え

ミドルウェアはプラグインとして置き換えられました。プラグインは、単に引数として store を受け取る関数で、store で mutation イベントを購読することができます:

const myPlugins = store => {
  store.subscribe('mutation', (mutation, state) => {
    // 何かの処理 ...
  })
}

より詳細については、プラグインのドキュメント の example を参照してください。

移行ガイド

コードに対し 移行ヘルパー を実行し、store 上でmiddlewaresを検出してください。

← Vue Router 0.7.x からの移行 他のフレームワークとの比較 →
間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub で編集しましょう！ このサイトは Netlify でホストされています。