Quasar-Pinia使用LocalStorage时getter返回错误值问题排查

核心问题在于Pinia getter的缓存机制，以及你的state初始化逻辑和getter设计不匹配：

1. 页面刷新后，store初始化时state.token为null，此时调用getToken getter会读取LocalStorage中的旧Token并缓存结果（因为getter依赖的state.token没有变化）。
2. 执行logout的setToken(null)时，你只是把state.token设为null（它本来就是null），未触发getter依赖的状态变更，所以Pinia不会重新计算getToken，依然返回之前缓存的旧Token值。
3. 未刷新页面时，state.token原本有值，设为null属于状态变更，会触发getter重新计算，所以结果正确。

正确的做法是在store初始化时就把LocalStorage的Token同步到state中，让state和外部存储保持一致，getter只负责返回state的值即可：

state: () => ({
    user: null,
    // 初始化时直接从LocalStorage读取Token，同步到state
    token: LocalStorage.getItem('token') || null
}),

getters: {
    getUser: (state) => state.user,
    // getter只返回state中的值，不再依赖外部存储
    getToken: (state) => state.token,
},

actions: {
    async logout () {
        try {
            await api.get('/logout')
        } catch (e) {
            console.log(e)
        }

        this.user = null
        await this.setToken(null)
    },

    async setToken (token) {
        this.token = token
        if (token) {
            LocalStorage.set('token', token)
        } else {
            LocalStorage.remove('token')
        }
        // 此时getToken会直接返回state的token，和LocalStorage保持一致
        console.log('local storage:', LocalStorage.getItem('token'))
        console.log('state:', this.token)
        console.log('getter:', this.getToken)
    }
}

Pinia的getter是基于它依赖的state进行缓存的，只有当依赖的state发生变化时，getter才会重新计算。如果getter中读取外部存储（比如LocalStorage），这个外部存储的变化不会被Pinia感知到，很容易出现缓存不一致的问题。所以最佳实践是：

• 外部存储只在store初始化和状态更新时同步
• getter仅基于state做衍生计算，不依赖外部状态

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