store.stateの読み込みは遅延する - Nuxt.js

概要

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>