Nuxt.jsでVuexを使う
食わず嫌いな感じで使わずにいたけどチュートリアルを試してみた
クラシックモードとモジュールモードがあるみたい。
最初なんでクラシックモードを試してみる。
クラシックモードのサンプル
store/index.jsimport 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.jsexport 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で親、子のデータやり取りするよりは楽に出来るというのはわかった。
ディスカッション
コメント一覧
まだ、コメントがありません