Vuex 入門

Vuex アプリケーションの中心にあるものは ストア です。"ストア"は、基本的にアプリケーションの状態を保持するコンテナです。単純なグローバルオブジェクトとの違いが2つあります。

Vuex ストアはリアクティブです。 Vue コンポーネントがストアから状態を取り出すとき、もし、ストアの状態が変化したら、ストアは、リアクティブかつ効率的に更新を行います。
ストアの状態を直接変更することはできません。明示的な ミューテーションのディスパッチによってのみ、ストアの状態を変更します。これによって、全ての状態の変更の追跡を容易にし、ツールでのアプリケーションの動作の理解を助けます。

シンプルなストア

注意: 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。もし、触れたことがなければ、ぜひ、触れてください! このドキュメントは、他に大規模アプリケーションの構築に書かれたコンセプトを既に読まれていることを前提にしています。

Vuex ストアの作成は、かなり単純です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。

import Vuex from 'vuex'

const state = {
  count: 0
}

const mutations = {
  INCREMENT (state) {
    state.count++
  }
}

export default new Vuex.Store({
  state,
  mutations
})

store.state でストアオブジェクトの状態を参照でき、また、ミューションの名前でディスパッチすることで、ミューテーションをトリガーできます。

store.dispatch('INCREMENT')

console.log(store.state.count) // -> 1

もし、オブジェクトスタイルのディスパッチがよければ、以下のように記述して、おこなうことができます。

// 先の例と同じ効果
store.dispatch({
  type: 'INCREMENT'
})

もう一度、store.state.count を直接変更する代わりにミューテーションをディスパッチする理由について、確認しておきましょう。このシンプルな規約は、あなたのコードの意図をさらに明確にし、コードを読んだ時にアプリケーションの状態の変更について、論理的に考えることができるようにします。加えて、私たちに全ての変更のログを取ったり、状態のスナップショットを取ったり、タイムトラベルデバッグを行うようなツールを実装する余地を与えてくれます。

今回は最も単純な例を通して、ストアが何かについて説明してきました。しかし、 Vuex はストアだけではありません。次から、ステート、ミューテーション、アクションといった Vuex のコアコンセプトについて詳しく説明していきます。

getting-started.md 3.1 KB Permalink History Raw

Vuex 入門

シンプルなストア

getting-started.md 3.1 KB

Permalink History Raw