概要
Nuxt.jsでvuex storeでデータのCRUDを行ってる状況を想定する。
例
すでにstate.userには他のページか親コンポーネントでの操作(dispatch, commit)で、undefinedではない何らかのObjectが入っている前提とします。
ダメなコード
このコードは動いたり動かなかったりします。(stateの読み込み速度によって結果が変わってしまう)
$store.getters を使っても、同様の症状になると思います。
<template>
<v-container>
<p>{{user}}</p>
</v-container>
<template>
<script>
export default {
beforeCreated() {
this.user = this.$store.state.user;
},
data(){
return {
user: Object
}
}
</script>
→ Error! user is undefined
ちゃんと動くコード
stateのLoad状況によって、表示を切り替え、undefinedエラーを防ぎます。
<template>
<v-container>
<p>{{user}}</p>
</v-container>
<template>
<script>
export default {
computed: {
user() {
const user = this.$store.state.user
if (!!user) {
return user;
}
else {
return {};
}
}
}
</script>
