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并没有将状态持续到页面重新加载。

您必须使用Vuex-persistedstate plugin之类的内容。

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

文档和安装说明：https://www.npmjs.com/package/vuex-persistedstate

Answer 2

您应该使用'vuex-persistedstate'将Vuex状态与localStorage保持一致。

您应该通过突变更新状态并调度操作，重新定义您的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()]
})

因此，要保存loggedUser，您应该发送一个操作：

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

您可以在Vuex official site

中了解有关突变和操作的更多信息

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

Answer 3

您只需使用Cookie即可 https://www.npmjs.com/package/vue-cookies

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

3 个答案: