Vuex的token状态属性未更新，localStorage存在token仍为空

我正在开发一个简易社交媒体项目，遇到一个问题：即使localStorage中存在token项，Vuex中的token状态属性也完全不更新。

以下是存储token属性的store代码（路径：resources/js/store/modules/middleware.js）：

const state = {
    user: {
        loggedIn: false,
        isSubscribed: false,
        token: localStorage.getItem('token') || ''
    },
}
const actions = {}
const mutations = {}
const getters = {
    auth(state) {
        return state.user
    }
}

export default {
    namespaced: false,
    state,
    actions,
    mutations,
    getters
}

起初我以为是state在token项写入前就已经初始化了，于是在中间件里加了10秒延迟打印token来验证（文件路径：resources/js/middleware/auth.js）：

export default function ({ next, store }) {
    if (!store.getters.auth.token) {
        console.log(store.getters.auth.token);
        setTimeout(() => {
            console.log(store.getters.auth.token);
        }, 10000)
        return next('login')
    }
    return next()
}

但延迟后打印的token仍然是空字符串，控制台显示如下：

如需其他信息来排查问题，请告知！

内容的提问来源于stack exchange，提问作者user18630923