사용자 로그 vue.js의 이름을 유지하려면 어떻게 해야 합니까?

사용자 로그 vue.js의 이름을 유지하려면 어떻게 해야 합니까?

내 앱에 로그인한 사용자를 저장하려고 합니다.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에 스토어 변수를 선언하고, 사용하는 로그인 컴포넌트에 사용자 이름을 저장할 때 이 방법을 사용했습니다.

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

그리고 다른 컴포넌트에 사용할 때는 이렇게 해서 얻었어요.

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

하지만 페이지를 새로 고치면 정보가 손실됩니다.내가 뭘 할 수 있을까?

하면 됩니다.'vuex-persistedstate'부엑스

다음 개체를 포함하도록 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 공식 사이트에서 돌연변이 및 작업에 대해 자세히 알아볼 수 있습니다.

https://codesandbox.io/s/0yy7vk29kv 의 예를 참조해 주세요.

Vuex는 페이지 새로고침 상태를 유지하지 않습니다.

Vuex-persistedstate 플러그인 같은 것을 사용해야 합니다.

import createPersistedState from 'vuex-persistedstate'

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

문서 및 설치 절차: https://www.npmjs.com/package/vuex-persistedstate

https://www.npmjs.com/package/vue-cookies에서 쿠키를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50355284/how-can-i-keep-the-name-of-user-logged-vue-js