按下刷新按钮时，nuxt.js 图像不显示答案

【问题标题】：nuxt.js image not show when push refresh button按下刷新按钮时，nuxt.js 图像不显示
【发布时间】：2018-05-29 18:04:28
【问题描述】：

我正在使用 nuxtjs，我想使用来自 $store 的 url

在 page/me/index.vue 中是

<template>
<div>
<img :src="user.avatar.url" />
<span>{{user.name}}</span>
</div>
</template>

<script>

  import axios from 'axios'

  export default {
    head () {
      return {
        title: 'Me - personal page',
        meta: [
        ]
      }
    },
    computed: {
      user () { return this.$store.state.user }
    }
  }
</script>

但是在我按下浏览器上的刷新按钮后它会显示

我尝试删除标签，一切正常（我可以看到 user.name）

请帮我解决这个问题。

问候。

【问题讨论】：

I try to delete tag , everything work fine (I can see user.name) 这是否意味着user.name 在页面刷新时正常工作，只是user.avatar.url 在页面刷新时不工作？

标签： vue.js nuxt.js

【解决方案1】：

您的商店将在刷新时被删除。所以这是预期的行为。

您必须以某种方式保存您的状态，以保持它。

两个最流行的选项是本地存储或会话 cookie。使用 nuxtjs cookie 会更合适。

最常用的插件是vuex-persiststate。

以下内容来自他们的文档：示例代码：

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

您需要安装js-cookie 才能使上述代码正常工作。

详细请参考官方文档：https://www.npmjs.com/package/vuex-persistedstate

【讨论】：