Vue.js vuex存储令牌不'；t更新accross组件

我有以下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
})

在我的main.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”。我还尝试将“挂载”更改为“计算”、“创建”和“准备”，但结果是一样的

如果我这样做，我似乎只能解决这个问题：

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

而isLoggedIn最终将成为现实

但如果我真的喜欢，那么vuex的意义何在

---

我想我可能是因为不知道是否调用computed/mounted/etc而出错，或者是因为我的方式不对，或者是因为我没有在正确的文件中初始化Vuex。。但是我觉得我现在已经尝试了所有这些

在您登录并设置令牌之前，您的组件可能已装入

考虑到您正在使用本地存储进行令牌持久化，我将以这种方式初始化该值，即

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

---

如果未设置（或已删除），则该值将为

null

。

Wow，这非常有效！非常感谢@fisker不太清楚你的意思<代码>装载的和

计算的

是两件截然不同的事情。