如何保留用户登录 vue.js 的名称

Question

我试图存储登录我的应用程序的用户。我使用 store.js 文件来使用 vuex 并保存我的变量。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'


Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    userloged: ''
  }
})

我在 main.js 上声明了 store 变量并以这种方式使用，当我在我使用的登录组件中保存用户名时，

        this.$store.state.userloged = this.username;

当我要在其他组件中使用时，我是这样得到的，

 computed:{
    userloged() {
        return this.$store.state.userloged;
    }
},

但是如果我刷新页面，我就会丢失信息。我能做什么？

Answer 1

您应该使用'vuex-persistedstate'localStorage 来保存 Vuex 状态。

您应该通过突变和分派操作来更新状态，重新定义您的 vuex 实例以包含以下对象：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    userlogged: ''
  },
  mutations: {
    saveUserLogged (state, loggedUser) {
      state.userLogged = loggedUser
    }
  },
  actions: {
    saveUserLogged (context, loggedUser) {
      context.commit('saveUserLogged', loggedUser)
    }
  },
  plugins: [createPersistedState()]
})

因此，要保存loggingUser，您应该调度一个操作：

this.$store.dispatch('saveUserLogged', this.username);

您可以在Vuex 官方网站了解有关突变和操作的更多信息

请查看此示例https://codesandbox.io/s/0yy7vk29kv