Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Vue + Nuxt.js】Nuxt.jsでのVuexの使い方

Web開発

【Vue + Nuxt.js】Nuxt.jsでのVuexの使い方

【Vue + Nuxt.js】Nuxt.jsでのVuexの使い方

目次

  1. Nuxt.jsでのVuexの書き方
  2. Storeで定義した内容をコンポーネントで利用する
  3. まとめ

今回は、Nuxt.jsにてVuexを使う方法をご紹介したいと思います。

概ね、使い方に関しては以前ご紹介したvue + vue-cliでVuexを使用する時とほぼ同じなのですが、Nuxt.jsでは少しだけ書き方が違うので、そこをご紹介したいと思います。

ちなみに前回のVuexの記事は以下になります。是非、ご参照ください。

【Vue + vue-cli】Vuex – Vueの状態管理ライブラリ
https://www.dailyupblog.com/web_development/802/

それではいきましょう。

Nuxt.jsでのVuexの書き方

Nuxt.jsではVuexの書き方が異なります。

package.jsonと同じ階層に「store」フォルダを作成して、その中にindex.jsを作成してください。

この中にStoreの内容を記述していきます。

state、mutations、actions、gettersは以下のように記述します。

state

export const state = () => ({
  //内容
});

mutations

export const mutations = {
  //内容
};

actions

export const actions = {
  //内容
};

getters

export const getters = {
  //内容
};

下記にstoreで定義した数値にmutationsで1足す、actionsで1秒後に1足す、算出プロパティで2かける例を書いてみました。

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

export const mutations = {
  addCount(state) {
    state.count += 1;
    console.log(state.count);
  }
};

export const actions = {
  timerCount({ commit }) {
    setTimeout(function() {
      commit("addCount");
    }, 1000);
  }
};

export const getters = {
  double(state) {
    return state.count * 2;
  }
};

このようにnuxt.jsですと、「export const mutations = {」のように記述します。

Storeで定義した内容をコンポーネントで利用する

Nuxt.jsにおいて、VuexのStoreで定義した内容をコンポーネントを利用する場合は通常のVue.jsと同じです。

先述の例をコンポーネント内で利用してみましょう。

「pages」フォルダ内のindex.vueに下記のように記述してください。

<template>
  <div class="container">
    <div>
      <div class="content-wrap">
        <input type="number" v-model="theValue" />
        <p>{{ $store.getters.double }}</p>
        <button @click="addCount">足す</button>
        <button @click="timerCount">1秒後に足す</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      value: null
    };
  },
  computed: {
    theValue: {
      get() {
        return this.$store.state.count;
      },
      set() {
        this.$store.dispatch("timerCount");
      }
    }
  },
  methods: {
    addCount: function() {
      this.$store.commit("addCount");
    },
    timerCount: function() {
      this.$store.dispatch("timerCount");
    }
  }
});
</script>

<style>
.container {
  margin: 0 auto;
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.content-wrap {
  width: 400px;
  margin-bottom: 6%;
}

.el-progress {
  margin-bottom: 1em;
}
</style>

mutationsのaddCountメソッドとactionsのtimerCountメソッドはmethods内で定義して、ボタンクリックにて呼び出されるように設定いたしました。

gettersのdoubleメソッドに関しては少し異なります。

stateの内容をコンポーネントにてv-modelで設定すると、「Do not mutate vuex store state outside mutation handlers」というエラーが出てしまいます。

v-modelは参照と設定を同時に行うため、このようなエラーが発生してしまいます。

この解決方法としては、v-modelに設定する値を算出プロパティ（computed）に置き換え、getでstateの値を返却し、set内で、storeのactionを呼び出すようにしてあげます。

それが、上記例の下記箇所です。

  computed: {
    theValue: {
      get() {
        return this.$store.state.count;
      },
      set() {
        this.$store.dispatch("timerCount");
      }
    }
  },

そして、v-modelには以下のように算出プロパティの値を設定します。

<input type="number" v-model="theValue" />

これで問題なく動くようになります。

まとめ

今回は、nuxt.jsのvuexの使い方が通常のvueとは少し書き方が異なったため、備忘録としてまとめました。

nuxt.jsでもvuexを使いこなしましょう！

それでは今回はここまで！

お疲れ様でした。

下記はnuxt.jsのVuex公式の解説です。
https://ja.nuxtjs.org/docs/2.x/directory-structure/store

関連記事

関連記事