Nuxt.jsでVuexを使う方法

2021年7月6日Vue.js

Nuxt.jsでVuexを使う方法を紹介します。

Nuxt.jsでVuexを使う方法

Nuxt.jsでは、Vuexをnpmなどでdependenciesにインストールする必要はありません。

Classic ModeとModules Mode

Nuxt.jsのVuexを利用する場合次の2つのモードがあります。

• Classic Mode
• Modules Mode

Classic Modeでは、storeフォルダにindex.jsを作成します。
index.jsにmutations、actions、gettersを定義します。

Modules Modeでは、storeフォルダに複数のjsファイルを作成します。
それぞれ名前空間付きのモジュールが作成されます。
mutations、actions、gettersはそれぞれ個別のjsファイルにて定義します。

下では、Classic ModeでのVuexの使い方を説明します。

store/index.jsを作成

storeフォルダが作成されているので、そこにindex.jsを作成します。
storeフォルダがない場合は、自分で作成します。

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {}
  })
}

export default createStore

そして、上のようにVuexをインポートします。
そして、Nuxtからコールできるように、オブジェクトではなく、関数を作成します。
それぞれのユーザーに個別のVuex Storeを返せるように、returnでVuexのStoreを返します。

そして、最後にエクスポートします。

使い方は、普通のVuexと同じです。

store/index.jsの具体例

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      loadedProducts: []
    },
    mutations: {
      setProducts(state, products) {
        state.loadedProducts = products
      }
    },
    actions: {
      setProducts(vuexContext, products) {
        vuexContext.commit('setProducts', products)
      }
    },
    getters: {
      loadedProducts(state) {
        return state.loadedProducts
      }
    }
  })
}

export default createStore

Vuexを使う

pagesのvueファイルのscriptで、次のように使用します。

  created() {
    this.$store.dispatch('setProducts', this.loadedProducts)
  }