按下刷新按钮

Question

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

的网址 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）

请帮我解决这个问题。

的问候。

Answer 1

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

你必须以某种方式保存你的状态，坚持下去。

两个最受欢迎的选项是localstorage或会话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