複数コンポーネントで状態管理をするのに便利らしいVuexを使ってみた。
Vuexストアに状態管理を任せて、各コンポーネントはストア経由で状態変更することで、状態変更を一元管理できるっぽい。
ストアの作成
store/sample.js を作成する。
store配下にjsファイルを作ると、Nuxt.jsがVuexストアにしてくれる。
- state
- 状態管理する要素の管理
- mutations
- 状態の操作
- actions
- 状態の操作する処理を呼び出し、反映（commit）する
- commitしない限り、反映されない
- 各コンポーネントからは、actionで定義した処理が呼ばれる。
// 状態管理したい要素に名前をつけて、stateとしてexportする export const state = () => ({ // 'hogeFromStore' という名前の状態を管理する hogeFromStore: 'Hello, Vuex!' }) // 状態を変更する処理は mutationとしてexportする export const mutations = { // ここでは hogeFromStore の状態（値）を変更する処理を定義 setHogeFromStore(state, value) { state.hogeFromStore = value } } // 実際に各コンポーネントから呼び出す処理をactionとしてexportする export const actions = { writeHoge(context, value) { // コミットすることで状態変更が反映される context.commit('setHogeFromStore', value) } }
コンポーネントからの呼び出し
各コンポーネントからは、 $store 経由で参照できるようになる
<template> <div> <!-- $store.state経由で状態の取得 --> <p>store: {{this.$store.state.sample.hogeFromStore}}</p> <!-- $store.dispatch経由でactionを呼び出す --> <button v-on:click="$store.dispatch('sample/writeHoge', '値を書き換えます')">Test</button> <!-- コンポーネントのScript経由で利用することも可能 --> <button v-on:click="testMethod()">Test2</button> </div> </template> <script> export default { methods: { // Scriptからも参照可能 testMethod: function() { console.log(this.$store.state.sample.hogeFromStore) this.$store.dispatch('sample/writeHoge', 'メソッドからの書き換え') console.log(this.$store.state.sample.hogeFromStore) } } } </script>
mountedからの利用
mountedからも利用できる。
なので、data変更時の処理として使える。
fetchと組み合わせて、レンダリング前にコンポーネントのデータをセットするといったことも可能。
※ただしmountedはSSRされないので注意。SSRしたいときはpageコンポーネントでasyncDataを使うなどする。
<template> <div> <p>store: {{this.$store.state.sample.hogeFromStore}}</p> </div> </template> <script> export default { mounted: function() { this.$store.dispatch('sample/writeHoge', 'mountedからも利用できる') } } </script>
