はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

こちらのサイトにcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

データ・状態の一元管理(Vuex)とは

今回はデータ・状態の管理に用いられる Vuex について紹介します。

プロジェクト内で複数のページ、コンポーネントを作成していると、

共通のデータを用いたい時が出てくると思います。

そんな時にデータの保管場所となってくれるのが、「Vuex」というプラグインです。

Vuex の公式サイト

※対象読者

Vue.js - HTML/CSS/Javascript を簡単に書けるフレームワーク

Nuxt.js - Vue.js をさらに便利にしたもの

WEB 系プログラムは触れたことがないが、上記くらいの知識を持っている。

プログラミングはやってみたいが、できる自信はない。緩く学びたい人。

利用するフォルダの確認と実装イメージ

Vuex では pages フォルダだけでなく、store フォルダも利用していきます。

store フォルダ：Vuex に格納する変数や必要な処理を用意します。
pages フォルダ：Vuex に格納した変数を取り出したり、格納したりします。

実際に Vuex を用いたカウントページを作成しました。

Home Page と About Page で count データを共有出来ていることがわかると思います。

こちらのサイトにcodesandboxを埋め込んでいますので、実際の振る舞いをご確認ください。

codesandbox のページをリロードすると、保管していたデータが消えていることがわかると思います。

これは、ブラウザ上にデータを保管していることで起きる現象です。

リロードしてもデータを消さないようにするには、ストレージを用意する必要があります。

Firestore など外部にストレージを用意するか、

vuex のプラグインである「vuex-persistedstate」を使い、

ローカルストレージ（cookie と似たようなイメージ）を用意することで、

リロードしてもデータを消さない WEB ページを実装することができます。

Vuex のコードの解説

store フォルダの実装

store フォルダに格納された index.js を見ていきましょう。

export const state = () => ({
  count: 0
});

export const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

上記のコードは大きく 2 つの役割に分かれています。

「データの定義」と「データの操作」の定義です。

次のコードがデータを定義しているコードになっています。

export const state = () => ({
  count: 0
});

コード自体は非常にシンプルであり、ここで定義したデータが store に保持されます。

次のコードはデータを操作しているコードです。

export const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

store 内のデータを操作できるのは、mutations に記載された操作からのみです。

今回のサンプルのように、pages フォルダや components フォルダに格納された vue ファイルからこれらの操作を呼び出し、データの変更を行います。

実際に呼び出している pages の index.vue ファイルがこちらです（script のみ抜粋）

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    }
  }
};
</script>

上から少しずつ解説していきます（正しく解説出来ているかは怪しい）

次のコードで store に定義したデータを呼び出しています。

this.$store.state.count

store から呼び出した state.count を return で count に格納しています。

次が store に定義した操作を呼び出しているコードです。

this.$store.commit("increment")

先ほど store で定義した increment の操作を呼び出し、count の値を変更しています。

おわり

以上が vuex を用いたデータの共有と同期的な操作のやり方です。

データの管理まで出来れば、簡単なアプリケーションを作ることもできると思います。

お疲れ様でした。