はじめに
自分が勉強した内容のまとめなので、正確性は保証しません。
こちらのサイトにcodesandboxを埋め込んでいます。
実際の振る舞いを見ながらコードの確認ができるので非常に便利です。
シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。
データ・状態の一元管理(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 を用いたデータの共有と同期的な操作のやり方です。
データの管理まで出来れば、簡単なアプリケーションを作ることもできると思います。
お疲れ様でした。