Vue.jsステートマネージャー、Vuex

Vuexは、Vue.jsの公式の状態管理ライブラリです。このチュートリアルでは、その基本的な使用法について説明します。

Vuexの紹介

Vuexは、Vue.jsの公式の状態管理ライブラリです。

その仕事は、アプリケーションのコンポーネント間でデータを共有することです。

箱から出してすぐに使えるVue.jsのコンポーネントは、

  • 小道具、親から子コンポーネントに状態を渡す
  • イベント、親コンポーネントの状態を子から変更する、またはルートコンポーネントをイベントバスとして使用する

これらの単純なオプションで許可されるよりも複雑になる場合があります。

この場合、適切なオプションは、状態を1つのストアに一元化することです。これはVuexが行うことです。

なぜVuexを使用する必要があるのですか

Vueで使用できる状態管理オプションはVuexだけではありません(戻ってきたも)、しかし、その主な利点は、それが公式であり、Vue.jsとの統合がそれを輝かせていることです。

Reactを使用すると、エコシステムが巨大でデファクトスタンダードがないため、利用可能な多くのライブラリの1つを選択する必要があります。最近、Reduxが最も人気のある選択肢であり、人気の点ではMobXがそれに続いています。 Vueを使えば、特に始めたばかりのときは、Vuex以外のものを探す必要はないと言っても過言ではありません。

VuexはReactエコシステムから多くのアイデアを借りました。これは、Reduxによって普及したFluxパターンであるためです。

FluxまたはReduxをすでに知っている場合、Vuexは非常によく知られています。そうでなければ問題ありません-私はすべての概念をゼロから説明します。

Vueアプリケーションのコンポーネントは、独自の状態を持つことができます。たとえば、入力ボックスには、入力されたデータがローカルに保存されます。これは完全に問題なく、Vuexを使用している場合でもコンポーネントはローカル状態を持つことができます。

状態の一部を渡すために多くの作業を開始するときは、Vuexのようなものが必要であることを知っています。

この場合、Vuexは状態の中央リポジトリストアを提供し、ストアにそうするように依頼して状態を変更します。

状態の特定の部分に依存するすべてのコンポーネントは、ストアのゲッターを使用してそのコンポーネントにアクセスします。これにより、状態が変更されるとすぐに更新されます。

Vuexを使用すると、正しく機能するように特定の方法で設定する必要があるため、アプリケーションが複雑になりますが、複雑すぎるとスパゲッティの混乱に発展する可能性のある、整理されていない小道具の通過やイベントシステムの解決に役立つ場合は、良い選択。

はじめましょう

この例では、Vue CLI応用。 Vuexは、スクリプトタグに直接ロードすることでも使用できますが、Vuexはより大きなアプリケーションとより調和しているため、Vueですばやく起動できるような、より構造化されたアプリケーションで使用する可能性がはるかに高くなります。 CLI。

私が使用する例は、CodeSandboxです。これは、VueCLIサンプルをすぐに使用できる優れたサービスです。https://codesandbox.io/s/vue。遊んでみることをお勧めします。

CodeSandbox

そこに着いたら、依存関係を追加するボタンをクリックし、「vuex」と入力してクリックします。

これで、Vuexがプロジェクトの依存関係に表示されます。

Vuexをローカルにインストールするには、次のコマンドを実行できますnpm install vuexまたはyarn add vuexプロジェクトフォルダ内。

Vuexストアを作成する

これで、Vuexストアを作成する準備が整いました。

このファイルはどこにでも置くことができます。一般的に、それをに入れることをお勧めしますsrc/store/store.jsファイルなので、それを行います。

このファイルでは、Vuexを初期化し、Vueにそれを使用するように指示します。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Vuex store

を使用して作成したVuexストアオブジェクトをエクスポートしますVuex.Store()API。

ストアのユースケース

スケルトンが配置されたので、Vuexの適切なユースケースのアイデアを考えて、その概念を紹介します。

たとえば、2つの兄弟コンポーネントがあります。1つは入力フィールドを持ち、もう1つはその入力フィールドのコンテンツを出力します。

入力フィールドが変更されたら、その2番目のコンポーネントのコンテンツも変更したいと思います。非常に単純ですが、これでうまくいきます。

必要な新しいコンポーネントの紹介

HelloWorldコンポーネントを削除し、FormコンポーネントとDisplayコンポーネントを追加します。

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>
<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

それらのコンポーネントをアプリに追加する

それらをHelloWorldコンポーネントの代わりにApp.vueコードに追加します。

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script> import Form from ‘./components/Form’ import Display from ‘./components/Display’

export default { name: ‘App’, components: { Form, Display } } </script>

ストアに状態を追加します

これが整ったら、store.jsファイルに戻り、ストアに次のプロパティを追加します。state、オブジェクトであり、flavorプロパティ。それは最初は空の文字列です。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ } })

ユーザーが入力フィールドに入力すると更新されます。

突然変異を追加する

を使用しない限り、状態を操作することはできません突然変異。フォームコンポーネント内で使用される1つのミューテーションを設定して、状態を変更する必要があることをストアに通知します。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } } })

状態プロパティを参照するゲッターを追加します

そのセットで、状態を確認する方法を追加する必要があります。私たちは使用してそうしますゲッター。ゲッターを設置しましたflavorプロパティ:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } }, getters: { flavor: state => state.flavor } })

どのように注意してくださいgettersオブジェクトです。flavorはこのオブジェクトのプロパティであり、状態をパラメータとして受け入れ、flavor状態のプロパティ。

Vuexストアをアプリに追加する

これで、ストアを使用する準備が整いました。アプリケーションコードに戻り、main.jsファイルで、状態をインポートしてVueアプリで利用できるようにする必要があります。

我々が追加します

import { store } from './store/store'

それをVueアプリケーションに追加します。

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

これを追加すると、これがメインのVueコンポーネントであるため、storeすべてのVueコンポーネント内の変数は、Vuexストアを指します。

commitを使用してユーザーアクションの状態を更新します

ユーザーが何かを入力したときに状態を更新しましょう。

私たちはを使用してそうしますstore.commit()API。

ただし、最初に、入力コンテンツが変更されたときに呼び出されるメソッドを作成しましょう。を使用しております@inputのではなく@change後者は、フォーカスが入力ボックスから離れたときにのみトリガーされるためです。@inputキーを押すたびに呼び出されます。

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>

<script> export default { methods: { changed: function(event) { alert(event.target.value) } } } </script>

フレーバーの価値がわかったので、VuexAPIを使用します。

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

を使用してストアを参照する方法をご覧くださいthis.$store?これは、メインのVueコンポーネントの初期化にストアオブジェクトが含まれているためです。

ザ・commit()メソッドはミューテーション名を受け入れます(changeVuexストア内)とペイロード。これは、コールバック関数の2番目のパラメーターとしてミューテーションに渡されます。

ゲッターを使用して状態値を出力します

次に、を使用して、表示テンプレートでこの値のゲッターを参照する必要があります。$store.getters.flavorthisテンプレートを使用しているため、削除できます。this暗黙的です。

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

まとめ

Vuexの紹介は以上です。

完全に機能するソースコードは、次のURLで入手できます。https://codesandbox.io/s/zq7k7nkzkm

このパズルにはまだ多くの概念が欠けています。

  • 行動
  • モジュール
  • ヘルパー
  • プラグイン

しかし、公式ドキュメントでそれらについて読んで行くための基本があります。

ハッピーコーディング!

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: