Как я могу сохранить имя пользователя в журнале 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: ''
  }
})

Я объявил переменную store в моем main.js и использовал его таким образом, когда я сохраняю имя пользователя в используемом мной компоненте входа в систему,

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

И когда я собираюсь использовать в других компонентах, я получил это таким образом,

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

Но если я обновлю страницу, я потеряю информацию. Что я могу сделать?

Answer 1

Вы должны использовать '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()]
})

Таким образом, чтобы сохранить зарегистрированного пользователя, вы должны отправить действие:

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

Подробнее о мутациях и действиях можно узнать на официальном сайте Vuex

Пожалуйста, примитеПосмотрите на этот пример https://codesandbox.io/s/0yy7vk29kv

Answer 2

Вы можете просто использовать куки с https://www.npmjs.com/package/vue-cookies

Answer 3

Vuex не сохраняет состояние после перезагрузки страницы.

Вы должны использовать что-то вроде Vuex-persistedstate plugin .

import createPersistedState from 'vuex-persistedstate'

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

Документация и инструкции по установке: https://www.npmjs.com/package/vuex-persistedstate