Nuxt.jsでVuexを使ってみる #nuxtjs #vuejs

Nuxt.js Vue.js

複数コンポーネントで状態管理をするのに便利らしいVuexを使ってみた。

Vuexストアに状態管理を任せて、各コンポーネントはストア経由で状態変更することで、状態変更を一元管理できるっぽい。

ja.nuxtjs.org

ストアの作成

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を使うなどする。

→mounted

<template>
  <div>
    <p>store: {{this.$store.state.sample.hogeFromStore}}</p>
  </div>
</template>

<script>
export default {
  mounted: function() {
    this.$store.dispatch('sample/writeHoge', 'mountedからも利用できる')
  }
}
</script>

参考