老师能讲解一下vuex-persistedstate怎么使用吗？

Question

我去查了下vuex，vuex在刷新页面或者去到其它页面的时候会清空掉状态。所以要使用vuex-persistedstate来存储到localstorage里面，刷新页面或者去其它页面也不会清空。看了几个博客的解释，但我看不太懂。
最好能写个小例子。在某一个页面通vue-resource或者vue-axios从后端取到的数据存到vuex的state里面，这个app里面所有页面都能用state里数据。

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userName: '您还未登录',
    backName: '返回登录界面'
  },
  mutations: {
    setName (state, name) {
      state.userName = userName  // 登录后从后端取到的用户昵称（登录成功的时候调用this.$store.dispatch('getName', res.data.userName)）
      state.backName = '安全退出'   // 登录成功后退出按钮名字改成这个
    }
  },
  actions: {
    getName ({ commit }, obj) {
      commit('setName', obj)
    }
  },
  plugins: [persistedState({
    storage: window.localStorage
  })]
})

就大概这种功能，但我写的这个好像不行。
我在就业班里面问了，里面的老师说只讲一下vuex的基础用法，再深入的就不讲，叫我来买有讲vuex的老师的课程来问。所以现在来问老师您了。麻烦老师回答一下，谢谢了。

Answer 1

快乐动起来呀 2019-07-02 00:01:01

是按 https://www.npmjs.com/package/vuex-persistedstate 这个来的吗，nuxt.js 的版本要求一致吗，我建议你用最新的nuxt.js起一个初始化项目，然后再配合这个插件试试，其实很简单的