Vue.jsのライブラリ　Vuex　Storeについて

業務で使うタイミングがあったので、アウトプットのための記録

Vuexとは（ドキュメント引用）

Vue.jsアプリケーションのための状態管理パターン + ライブラリになります。
これ予測可能な方法によって状態の差異を行うというルールを保証し、アプリケーション内の
すべてのコンポーネントのための集中型のストアとして機能します。

まぁわかりずらいですよねあとでわかりますが文章で表すと
Vuex　アプリケーション専用に設計された状態管理ライブラリ
Store　アプリケーションの状態が保存および管理される一元的な場所

になります。

Vuexの考え方

Vuexでは、アプリケーションの状態を「一方向で管理」していくことで、
信頼できる唯一の情報源としてステートを保持、共有していきます。

とにかく「一方通行で進む」これがVuexでその中で登場するのが「Store」になります。

①VueComponentから、Vuexで定義したアクションを呼び出す「Dispatch（トリガー）」
②DispatchされたアクションはAPIを通じて、サーバー側で何かしら処理をする
③サーバー側で返却されたデータをミューテーションへ送る（Comitする）
④ミューテーションがステートを変更する（Mutateする）
⑤ミューテートされたステートを、Vue　Component側に描画する（Renderする）

実装してみる

今回は簡単なクリック数をカウントするアプリを作る想定です。

src/store.js

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
    decrement({ commit }) {
      commit("decrement");
    },
  },
});

export default store;

この部分がアプリケーションのカウント数を保存する場所になります。

src/components/Counter.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Counter",
  computed: {
    ...mapState(["count"]), // カウントプロパティにアクセス
  },
  methods: {
    ...mapActions(["increment", "decrement"]), // どちらのアクションに接続するか
  },
};
</script>

カウンターコンポーネント、
Dispatchに相当するのは

 <button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>

ここがクリックされたときに、

  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
    decrement({ commit }) {
      commit("decrement");
    },
  },

この部分が動く、incrementを押したら、incrementがｍ
decrementが動けば、decrementが動く

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
    decrement({ commit }) {
      commit("decrement");
    },
  },
});

export default store;

store.jsのこの部分が対応しています。

incrementがクリックされたときに、Store.jsの

 actions: {
    increment({ commit }) {
      commit("increment");
    },
    decrement({ commit }) {
      commit("decrement");
    },

を通してミューテーションに情報をコミットする

  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },

countが増えて、

    return {
      count: 0,
    };

ここの数字が変わり

この部分が戻り値なのでCounter.vueの

  computed: {
    ...mapState(["count"]), // カウントプロパティにアクセス
  },

ここにつながり、表示が変わる

ざっくりメモ解説