페이지를 갱신할 때 Vuex 및 VueRouter에서 글로벌 상태가 손실되지 않도록 합니다.

페이지를 갱신할 때 Vuex 및 VueRouter에서 글로벌 상태가 손실되지 않도록 합니다.

SPA를 만들고 있습니다.클라이언트측 세션의 기본적인 예로서 Vuex를 사용하여 사용자가 로그인하고 있는지 여부에 관계없이 브라우저를 수동으로 업데이트하지 않아도 정상적으로 동작합니다.상태가 초기 상태로 다시 시작되면 이를 방지할 방법이 있습니까? 아니면 항상 로컬 스토리지를 사용해야 합니까?그렇다면 스토리지의 초기 상태를 어떻게 얻을 수 있을까요?

컴포넌트 탐색바

<template>
    <div>
        <ul v-if="!isLogued">
            <router-link :to="{ name:'login'}" class="nav-link">Login</router-link>
        </ul>
        <ul  v-if="isLogued">
                <a href="#" class="nav-link">Profile</a>
                <a href="" @click.prevent="logout">Salir</a>
        </ul>
    </div>
</template>
<script>
    import {mapState,mapMutations  } from 'vuex';
    export default{
        computed : mapState(['isLogued']),
        methods:{
            ...mapMutations(['logout']),
        }
    }
</script>

Store.js

export default {
    state: {
        userLogued: {},
        api_token  : '',
        isLogued : false
    },
    mutations: {

        login( state){
            state.userLogued = JSON.parse(localStorage.getItem('usuario'));
            state.api_token = localStorage.getItem('api_token');
            state.isLogued =  true
        },

        logout(state){
            state.userLogued = {}
            state.isLogued = false
            state.api_token  = null
            localStorage.clear()
        }
    }
};

App.JS

Vue.use(VueRouter)
Vue.use(Vuex)

import store from './vuex/store';
import routes from './routes';
const router = new VueRouter({
    mode: 'history',
    routes
})

const app = new Vue({
   router,
   store : new Vuex.Store(store)
}).$mount('#app')

로그인 컴포넌트에서는 악리로 투고를 하고 올바른 경우 다음 작업을 수행합니다.

   methods : {
        ...mapMutations(['login']),
        sendLogin(){
            axios.post('/api/login' , this.form)
                .then(res =>{
                    localStorage.setItem('api_token', res.data.api_token);
                    localStorage.setItem('user_logued', JSON.stringify(res.data.usuario));
                    this.login();
                    this.$router.push('/');
                })

페이지 새로고침, 브라우저 세션 등에서 상태를 유지하려면 항상 영구 스토리지 메커니즘을 사용해야 합니다.localStorage, sessionStorage, 쿠키, indexeddb...를 사용할 수 있습니다.sessionStorage는 물론 현재 세션에만 유효하지만, 고객의 요구에 가장 적합한 옵션입니다.

초기 상태를 복원하려면 vuex용 플러그인을 사용합니다(예: vuex-peristed state).이렇게 하면 vuex를 스토리지에 저장/복원할 수 있습니다.

예를 들어, 의 인스턴스 작성vuex-persistedstate매장에서의 사용은 다음과 같이 간단합니다.

import createPersistedState from 'vuex-persistedstate'

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

언급URL : https://stackoverflow.com/questions/49714606/avoid-that-when-refreshing-the-page-the-global-status-is-lost-with-vuex-and-vue