【Nuxt.js】Getterでstateがうまく取得できない

お世話になっております。
Nuxt.jsを使っていて以下の問題に直面しました。

まず起こっていること・試したことを順番に説明致します。

①nuxtServerInitでstate.userをセット

//mutations内にて
mutations: {
  setUser(state, payload) {
    state.user = {...payload};
  }
},

//nuxtServerInit内にて
const userInfo = {
　name: 'name'
};
commit("setUser", userInfo);

②nuxtServerInit内でstate.userをgetters.getUserで受け取りコンソール出力→想定通り動作

//getters内にて
getters: {
  getUser: state => state.user
},

//nuxtServerInit内にて
console.log(getters.getUser);

//出力結果
{
  name: 'name'
}

③index.vueでstate.userをthis.$store.getters.getUserで受け取り表示→上手く動作しない（空オブジェクトが返ってくる）

<template>
  <div>
    this page is index.vue
    userName: {{user}}
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.getters.getUser;
　　　//空オブジェクト{}が返ってくる。
    }
  },
}
</script>

// {{user}}に {} が表示される。

④そこで試しにstate.user.nameにデフォルトでdefault nameという値を持たせ、index.vueでuser.nameを取得すると上手く動作した

// store/index.jsのstate内にて
state: () => ({
  user: {
    name: 'default name'
  }
}),

// pages/index.vueにて
<template>
  <div>
    this page is index.vue
    userName: {{user.name}} 
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.getters.getUser;
    }
  },
}
</script>

// {{user.name}}で「default name」と表示される。

以上のように、サーバー側でstateのuser.nameを取得できているにも関わらず、クライアント側で取得できない原因が分からず詰まっています。
是非アドバイスなどいただければ幸いです。

k_a

2021/07/12 08:46

④のようにデフォルト値を設定した状態で、①の`state.user`をセットし、④のように表示した場合はどうなっていますか？

takabee

2021/07/12 09:00

ご返信ありがとうございます。・サーバー側のコンソールには、 { name: 'name' } が表示され、・クライアント側のindex.vueの{{user.name}}には「default name」と表示されます。つまりサーバー側はセットした値、クライアント側はデフォルト値が表示されています。

行動規範の内容に同意します

回答1件

ベストアンサー

勘違いだったら申し訳ないのですが、NuxtのStoreはエクスポート記法で書くような気がします。
私の環境では以下のプログラムで動きましたがいかがでしょうか？

/store/index.js

javascript
1export const state = () => ({
2  user: {
3    name: 'default name',
4  },
5})
6
7export const getters = {
8  getUser: (state) => state.user,
9}
10
11export const actions = {
12  nuxtServerInit({ commit }, { req }) {
13    const userInfo = {
14      name: 'Yamada Taro',
15    }
16    console.log(this.getters.getUser.name)
17    commit('setUser', userInfo)
18    console.log(this.getters.getUser.name)
19  },
20}
21
22export const mutations = {
23  setUser(state, payload) {
24    state.user = { ...payload }
25  },
26}

/pages/index.vue

Vue
1<template>
2  <div>this page is index.vue userName: {{ user.name }}</div>
3</template>
4
5<script>
6export default {
7  computed: {
8    user() {
9      return this.$store.getters.getUser
10    },
11  },
12}
13</script>