はてなブックマーク

例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。 computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。しかし、どちらも理想的とはいえません。 Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。

インストール #直接ダウンロードする / CDN #https://unpkg.com/vuex@4 Unpkg.com で NPM ベースの CDN リンクが提供されています。上記リンクは常に NPM の最新のリリースを指します。https://unpkg.com/vuex@4.0.0/dist/vuex.global.js のような URL によって特定のバージョン/タグを利用することもできます。 Vue のあとで vuex を取り込むと自動的に Vuex が導入されます: <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>

API リファレンス #Store #createStore #createStore<S>(options: StoreOptions<S>): Store<S> 新しいストアを作成します。 import { createStore } from 'vuex' const store = createStore({ ...options }) Store コンストラクタオプション #state #型: Object | Function ストアのための ルートステートオブジェクトです。 詳細 オブジェクトを返す関数を渡す場合、返されたオブジェクトはルートステートとして使用されます。これは特にモジュールの再利用のためにステートオブジェクトを再利用する場合に便利です。詳細 mutations #型: { [type: string]: Function } ストアにミューテーションを登録しま

Vuex は 単一ステートツリー (single state tree) を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。単一ステートツリーは状態の特定の部分を見つけること、デバッグのために現在のアプリケーションの状態のスナップショットを撮ることを容易にします。 単一ステートツリーはモジュール性と競合しません。以降の章で、アプリケーションの状態とミューテーション(変更)をサブモジュールに分割する方法について説明します。 Vuexに保存するデータは、Vueインスタンスの data と同じルールに従います。つまり、ステートオブジェクトはプレーンでなければなりません。Vue#dat

実際に Vuex のストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることです。Vuex のミューテーションはイベントにとても近い概念です: 各ミューテーションはタイプとハンドラを持ちます。ハンドラ関数は Vuex の状態（state）を第1引数として取得し、実際に状態の変更を行います: const store = createStore({ state: { count: 1 }, mutations: { increment (state) { // 状態を変更する state.count++ } } }) 直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが increment のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーショ

Vuex 入門 Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの状態（state）を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。 Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。 ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。 シンプルなストア 注意: 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし触れたことがなければ、ぜひ触れてください！ Vu

厳格モードで Vuex を使用するとき、Vuex に属する状態の一部で v-model を使用するのは少しトリッキーです: obj がストアからオブジェクトを返す算出プロパティ (computed property) と仮定すると、v-model は input でユーザーが入力するとき、直接 obj.message を変更します。厳格モードでは、この変更は明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。 それに対処するための "Vuex way" は、<input> の値をバインディングし、input または change イベントでアクションを呼び出すことです:

注意 これは、Vue 3 で動作する Vuex 4 のためのドキュメントです。Vue 2 で動作する Vuex 3 のドキュメントをお探しの方は、こちらをご覧ください。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 "状態管理パターン"とはなんですか？ #単純な Vue で作られたカウンターアプリをみてみましょう: const Counter = { // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment ()

注意 これは、Vue 3 で動作する Vuex 4 のためのドキュメントです。Vue 2 で動作する Vuex 3 のドキュメントをお探しの方は、こちらをご覧ください。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 "状態管理パターン"とはなんですか？ #単純な Vue で作られたカウンターアプリをみてみましょう: const Counter = { // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment ()

Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの 状態（state） を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。 Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。 ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。 シンプルなストア #

Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well. Vuex 3 and 4 will still be maintained. However, it's unlikely to add new functionalities to it. Vuex and Pinia can