페이지 리디렉션 후 Vuex 상태가 보존되지 않음

페이지 리디렉션 후 Vuex 상태가 보존되지 않음

Vue.js에서는 다음 방법으로 사용자를 로그인하고 vuex 스토어에 값을 설정한 후 홈 페이지로 리디렉션합니다.

   login: function () {
            axios.post( this.BASE_URL + "/login", {
            username: this.username,
            password: this.password,
          }).then( (res) => { 
                this.$store.commit('setIsAuthenticated', true);
                this.$store.commit('setToken', res.data.token);
                this.$store.commit('setPhoto', res.data.photo);
                this.$store.commit('setUsername', res.data.username);
                window.location.href = '/home'; //<-The problem     
          }

돌연변이 예:

setToken: function (state, token) {
    state.token = token;
    },
setUsername: function (state, username) {
    state.username = username;
},

앳App.vue(루트 성분), 스토어에서 계산된 값으로 값을 가져옵니다.

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

    token () {
        return this.$store.state.token; 
    } ,

내가 코멘트할 때window.location.href = '/home';Vue.js 콘솔에 로그인이 성공하여 스토어에 값이 설정되어 있는 것을 알 수 있지만 페이지가 로 리디렉션되는 즉시/home모든 스토어 값이 비워집니다.왜 이런 일이 일어나는지, 어떻게 고쳐야 하는지 궁금해요.

업데이트: 에서 vue-router를 사용하고 있습니다.routes.js다음과 같습니다.

import webLogin from './components/webLogin.vue';
import showAll from './components/showAll.vue';

export default [ 
  {path:'/', component: showAll },
  {path:'/add', component: addJoke  }  ,
  {path: '/login', component: webLogin},  
]

Vuex 상태는 메모리에 유지됩니다.로 리다이렉트 하는 경우window.location.href그러면 전체 페이지 로드가 트리거되어 현재 상태가 삭제됩니다.Vue 라우터를 사용하여http://https://router.vuejs.org/en/ 를 조작할 필요가 있습니다.

예를 들어, 루트명이Home다음과 같이 리다이렉트 할 수 있습니다.

this.$router.push({ name: 'Home' });

Vuej를 사용하여 페이지 사이를 이동하지만 수동으로 이동하지 않음

Vuejs 경로를 사용하여 한 페이지에서 다른 페이지로 이동하지 않는 한 상태는 유지되지 않습니다.다음 두 가지 시나리오를 고려합니다.

1. 한 페이지에서 스토어의 상태를 설정한 후.브라우저 창에 직접 다른 페이지의 URL을 입력하고 Enter 키를 누릅니다.가게의 상태를 확인합니다.이 값은 유지되지 않고 기본값으로 재설정됩니다.
2. 한 페이지에서 스토어의 상태를 설정한 후.Vuejs 경로를 사용하여 다른 페이지로 이동합니다.

인 Nuxtjs

<nuxt-link to="discussion/1">Go to Discussion</nuxt-link>

Vuejs의 경우

<router-link to="discussion/1">Go to Discussion</router-link>

가게의 상태를 확인합니다.매장 내에 보존됩니다.

언급URL : https://stackoverflow.com/questions/46441186/vuex-state-not-preserved-after-page-redirect