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

来源:2-12 Vuex高级用例(2)

菜鸟x

2019-06-30

我去查了下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的老师的课程来问。所以现在来问老师您了。麻烦老师回答一下,谢谢了。

写回答

1回答

快乐动起来呀

2019-07-02

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

0
0

Vue全家桶+SSR+Koa2全栈开发美团网

整合大前端8项技术,全面晋级全栈工程师,毕设/面试作品

2445 学习 · 1638 问题

查看课程