vuex 存储令牌不会跨组件更新
vuex store token doesn't update accross components
我有以下 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' 更改为 'computed'、'created' 和 'ready',但结果是一样的。
如果我这样做,我似乎只能解决问题:
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
。
我有以下 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' 更改为 'computed'、'created' 和 'ready',但结果是一样的。
如果我这样做,我似乎只能解决问题:
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
。