Quasar全局$user对象路由切换后丢失，如何实现持久化？

你之前操作的核心问题 #

1. 全局变量赋值方式错误：直接在Login.vue中给this.$user赋值，本质是给当前组件实例添加了一个$user属性，而非修改全局原型上的$user，其他组件访问时仍会读取原型上的初始空值。
2. 缺乏持久化存储：即使正确修改了全局变量，内存中的数据会在页面刷新、路由跳转（单页应用下路由切换本身不会清空，但刷新会）后丢失，没有做持久化处理。

基于Vuex-ORM的解决方案（适配你已有的技术栈） #

1. 确保User模型已正确定义（若未定义）

// src/models/User.js
import { Model } from '@vuex-orm/core'

export default class User extends Model {
  static entity = 'users'

  static fields () {
    return {
      id: this.attr(null),
      name: this.attr(''),
      email: this.attr(''),
      // 补充你的用户表字段
    }
  }
}

2. 在Vuex中注册Vuex-ORM模型

// src/store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
import { createORM } from '@vuex-orm/core'
import User from '../models/User'

Vue.use(Vuex)

const orm = createORM()

export default new Vuex.Store({
  plugins: [orm],
  state: {},
  mutations: {},
  actions: {}
})

3. 修改boot/user.js，全局挂载响应式的$user

// src/boot/user.js
export default ({ app, store, $q }) => {
  // 应用启动时从本地存储恢复用户数据
  const savedUser = $q.localStorage.getItem('currentUser')
  if (savedUser) {
    store.$db().model('users').create({ data: savedUser })
  }

  // 全局挂载响应式的$user，自动同步Vuex-ORM中的数据
  app.config.globalProperties.$user = computed(() => {
    return store.$db().model('users').first()
  })
}

注：Quasar v1版本请用Vue.prototype.$user替代app.config.globalProperties.$user

4. 登录时同步存储用户数据

// src/pages/Login.vue
methods: {
  async login() {
    try {
      const res = await this.$axios.post('/api/login', this.loginForm)
      const userData = res.response.data

      // 保存到Vuex-ORM，同步全局$user
      this.$store.$db().model('users').create({ data: userData })
      // 持久化到本地存储，防止刷新丢失
      this.$q.localStorage.set('currentUser', userData)

      this.$router.push('/dashboard')
    } catch (err) {
      // 处理登录错误逻辑
    }
  }
}

5. 登出时清理数据

// 示例：在Navbar组件的登出方法中
methods: {
  logout() {
    // 清除Vuex-ORM中的用户数据
    this.$store.$db().model('users').delete()
    // 清除本地存储
    this.$q.localStorage.remove('currentUser')
    // 跳转登录页
    this.$router.push('/login')
  }
}

关键说明 #

• 利用Vuex-ORM管理用户状态，保证$user是响应式的，全局组件能实时获取最新数据。
• 结合Quasar的$q.localStorage做持久化，解决页面刷新后数据丢失的问题。
• 避免直接修改Vue原型的原始值，改用响应式计算属性绑定Vuex-ORM的数据，确保全局一致性。

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