vuex 스토어 토큰이 구성 요소 간에 업데이트되지 않음

vuex 스토어 토큰이 구성 요소 간에 업데이트되지 않음

다음 store/index.js 파일이 있습니다.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  token: null
}
const mutations = {
  setToken (state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  removeToken (state) {
    state.token = null
    localStorage.removeItem('token')
  }
}
const getters = {
  isLoggedIn: state => {
    return state.token != null
  }
}
export default new Vuex.Store({
  state,
  getters,
  mutations
})

그리고 나의 메인.js에서는 다음과 같이 추가합니다.

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

로그인할 때 토큰을 다음과 같이 설정합니다.

this.$store.commit('setToken', response.data.token)

setToken 함수가 localStorage에 성공적으로 저장했기 때문에 작동해야 합니다.

그러나 다른 구성 요소로 이동하여 다음을 호출하는 경우:

data () {
  return {
    loggedIn: false
  }
},  
mounted: function () {
  this.loggedIn = this.$store.getters.isLoggedIn
  console.log(this.loggedIn)
}

그러면 콘솔에 'false'가 인쇄됩니다.또한 '마운트'를 '컴퓨팅', '크리에이티드', 'ready'로 변경하려고 시도했지만 결과는 동일합니다.

이렇게 해야만 문제를 해결할 수 있을 것 같습니다.

mounted: function () {
  this.token = localStorage.getItem('token')
  this.$store.commit('setToken', this.token)
},
computed: {
  isLoggedIn () {
    return this.$store.getters.isLoggedIn
  }
}

의 로그 대상입니다.인은 마침내 진실이 될 것입니다.

하지만 내가 그렇게 한다면 vuex의 의미는 무엇입니까?

계산/마운트/등을 호출해야 할지 모르는 것이 잘못되었거나, 돌연변이를 수행하는 방식이 잘못되었거나, 올바른 파일에서 Vuex를 초기화하지 않은 것 같습니다.하지만 지금은 다 해본 것 같아요.

로그인하고 토큰을 설정하기 전에 구성 요소가 마운트되었을 수 있습니다.

토큰 지속성을 위해 로컬 스토리지를 사용하는 것을 보면, 나는 그런 식으로 값을 초기화할 것입니다.

const state = {
  token: localStorage.getItem('token')
}

이것이 될 것입니다.null설정되지 않았거나 제거된 경우.

언급URL : https://stackoverflow.com/questions/47984903/vuex-store-token-doesnt-update-accross-components