Nuxt.jsでVuexを使う

2019年2月12日

食わず嫌いな感じで使わずにいたけどチュートリアルを試してみた

クラシックモードとモジュールモードがあるみたい。

最初なんでクラシックモードを試してみる。

クラシックモードのサンプル

store/index.js

import Vuex from 'vuex'

export default () => 
  new Vuex.Store({
    state: {
      items: [
        'foo','bar','baz'
      ],
      users: {
        taro: 0,
        jiro: 1,
        saburo: 2
      }

    },
    getters: {
      items: (state) => state.items,
      users: (state) => state.users,
    }
  })

page/index.vue

export default {
  data: () => ({
  }),
  computed: {
    ...mapGetters(['items','users'])
  }
}

vuexのサンプルで…mapGettersがどういう処理かわからず悩んだ。
オブジェクトスプレッド演算子という名前らしい。

基本的な場合は下のような感じで

export default {
  computed: {
    items() {
      return this.$store.state.items
    }
  }
}

それをVuexを使った物にすると下のようになるのかな

export default {
  computed: {
    ...mapGetters({
      items: 'items'
    })
  }
}

で { items: ‘items’ } のように同じなら省略可能で[‘items’]になるという認識でいいのかな
‘items’はgettersで宣言した名前みたい

WARN: Classic mode for store/ is deprecated and will be removed in Nuxt 3.

サンプルを試すとWARNが表示されるようになった

google翻訳したらすぐわかった。

store /のクラシックモードは廃止予定で、Nuxt 3では削除される予定です

削除されるみたいなので今後はモジュールモードで使ったほうが良さそうですね。

モジュールモードのサンプル

store/module.js

export const state = () => ({
  items: [
    'foo','bar','baz'
  ],
  users: {
    taro: 0,
    jiro: 1,
    saburo: 2
  }
})
export const getters = {
  getItems: (state) => state.items,
  getUsers: (state) => state.users
}

page/index.vue

<template>
<div>
<div>{{ getItems }}</div>
</div>
</template>

import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
getItems: 'module/getItems'
getUsers: 'module/getUsers'
})
}
}

サンプルコードだからクラシックとモジュールの違いと利点がわからないけど、getterのサンプルを書くと上のようでいいのかな

モジュールファイル/メソッドというように指定して登録。
登録名をHTML内で呼び出しでデータを表示できた

propsで親、子のデータやり取りするよりは楽に出来るというのはわかった。