javascript - 如何保留用户名登录 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' 将 Vuex 状态持久化到 localStorage。

您应该通过突变和分派(dispatch)操作来更新状态，重新定义您的 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()]
})

因此，为了保存已登录的用户，您应该发送一个操作:

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

您可以在 Vuex official site 中了解有关突变和操作的更多信息

请看这个例子https://codesandbox.io/s/0yy7vk29kv