SAMUEL NELA 697e82a0ee docs: replace the use of blacklist (#1775) 4 tahun lalu
..
README.md 4fa68ab4f0 docs: unified the tips format (#1719) 5 tahun lalu
actions.md 041df8da91 docs: added Scrimba lessons (#1512) 6 tahun lalu
core-concepts.md fab5054bc7 docs: reorganize file structure 7 tahun lalu
forms.md 041df8da91 docs: added Scrimba lessons (#1512) 6 tahun lalu
getters.md 041df8da91 docs: added Scrimba lessons (#1512) 6 tahun lalu
hot-reload.md 7807af7fcb docs(ja): update the latest changes (#1750) 5 tahun lalu
modules.md 07f2b193dc docs(ja): fixed few translations (#1774) 4 tahun lalu
mutations.md d4d04305e0 docs: update on object spread syntax (#1642) 5 tahun lalu
plugins.md 697e82a0ee docs: replace the use of blacklist (#1775) 4 tahun lalu
state.md d4d04305e0 docs: update on object spread syntax (#1642) 5 tahun lalu
strict.md ce7c7ea767 docs-ja: to be strong (#1332) 6 tahun lalu
structure.md fab5054bc7 docs: reorganize file structure 7 tahun lalu
testing.md 717d7661ae docs: update all locale testing.md to the latest 5 tahun lalu

README.md

Vuex 入門

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

  1. Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。

  2. ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。

シンプルなストア

:::tip 注意 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし触れたことがなければ、ぜひ触れてください! :::

Vuex をインストール してから、ストアをつくってみましょう。Vuex ストアの作成は、とても簡単です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。

// モジュールシステムを利用しているときはあらかじめ Vue.use(Vuex) を呼び出していることを確認しておいてください

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

これで store.state でストアオブジェクトの状態を参照でき、また store.commit メソッドで状態の変更を行うことができます。

store.commit('increment')

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

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

ストアオブジェクトの状態はリアクティブなので、ストアの状態をコンポーネント内で使うには算出プロパティ内でただ状態を返せば良いです。コンポーネントメソッドでミューテーションをコミットすることによって状態の変更を行います。

こちらが Vuex を使った最も基本的なカウンターアプリの例です。

これから Vuex のコアコンセプトについて詳しく説明していきます。まずは状態(state)からはじめましょう。