Vue.js中如何全局响应式存储登录用户信息并解决刷新后数据丢失问题

嘿，我来帮你搞定这个全局存储用户信息的难题！你遇到的两个核心问题——全局响应式访问和刷新后数据丢失，其实有几个靠谱的解决方案，咱们一个个聊：

方案一：用Pinia（Vue3官方推荐状态管理） #

Pinia不仅能让你的用户状态全局可访问，还自带响应式，结合localStorage就能完美解决刷新丢失的问题，步骤很清晰：

1. 先安装并配置Pinia #

如果还没装，先执行安装命令：

npm install pinia
# 或者yarn
yarn add pinia

然后在main.js里注册Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

2. 创建用户状态Store #

新建一个stores/userStore.js文件，定义用户状态、更新方法，还有从本地存储恢复数据的逻辑：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null, // 存储用户信息
    csrf: '', // 存储csrf token
    isSignedIn: false // 标记是否登录
  }),
  actions: {
    // 设置用户信息并持久化到localStorage
    setUser(userData, csrfToken) {
      this.currentUser = userData
      this.csrf = csrfToken
      this.isSignedIn = true
      localStorage.setItem('user', JSON.stringify(userData))
      localStorage.setItem('csrf', csrfToken)
      localStorage.setItem('signedIn', 'true')
    },
    // 清除用户信息
    clearUser() {
      this.currentUser = null
      this.csrf = ''
      this.isSignedIn = false
      localStorage.removeItem('user')
      localStorage.removeItem('csrf')
      localStorage.removeItem('signedIn')
    },
    // 页面刷新时从localStorage恢复数据
    initUserFromStorage() {
      const savedUser = localStorage.getItem('user')
      const savedCsrf = localStorage.getItem('csrf')
      const savedSignedIn = localStorage.getItem('signedIn') === 'true'
      
      if (savedUser && savedSignedIn) {
        this.currentUser = JSON.parse(savedUser)
        this.csrf = savedCsrf
        this.isSignedIn = savedSignedIn
      }
    }
  }
})

3. 在登录组件里使用Store更新用户 #

修改你的signinSuccessful方法，用Store来处理用户数据：

import { useUserStore } from '@/stores/userStore'

export default {
  methods: {
    signinSuccessful(response) {
      if (!response.data.csrf) {
        this.signinFailed(response)
        return
      }
      const userStore = useUserStore()
      userStore.setUser(response.data.user, response.data.csrf)
      this.error = ''
      this.$router.replace('/')
    }
  },
  // 页面加载时恢复用户数据
  mounted() {
    const userStore = useUserStore()
    userStore.initUserFromStorage()
  }
}

4. 在任意组件里访问用户信息 #

不管是选项式API还是组合式API，都能轻松获取：

// 选项式API示例
import { useUserStore } from '@/stores/userStore'

export default {
  computed: {
    currentUser() {
      return useUserStore().currentUser
    }
  }
}

// 组合式API示例
import { computed } from 'vue'
import { useUserStore } from '@/stores/userStore'

export default {
  setup() {
    const userStore = useUserStore()
    const currentUser = computed(() => userStore.currentUser)
    return { currentUser }
  }
}

方案二：用Provide/Inject + 响应式对象（无需状态管理库） #

如果不想引入额外的库，Vue3的provide/inject配合响应式对象也能实现，同样结合localStorage处理持久化：

1. 在App.vue里Provide用户状态 #

在根组件的setup里提供响应式的用户状态和更新方法：

import { provide, reactive, onMounted } from 'vue'

export default {
  setup() {
    // 创建响应式的用户状态
    const userState = reactive({
      currentUser: null,
      isSignedIn: false,
      csrf: ''
    })

    // 页面加载时从localStorage恢复数据
    onMounted(() => {
      const savedUser = localStorage.getItem('user')
      const savedCsrf = localStorage.getItem('csrf')
      const savedSignedIn = localStorage.getItem('signedIn') === 'true'
      
      if (savedUser && savedSignedIn) {
        userState.currentUser = JSON.parse(savedUser)
        userState.csrf = savedCsrf
        userState.isSignedIn = savedSignedIn
      }
    })

    // 更新用户信息的方法
    const updateUser = (userData, csrfToken) => {
      userState.currentUser = userData
      userState.csrf = csrfToken
      userState.isSignedIn = true
      localStorage.setItem('user', JSON.stringify(userData))
      localStorage.setItem('csrf', csrfToken)
      localStorage.setItem('signedIn', 'true')
    }

    const clearUser = () => {
      userState.currentUser = null
      userState.csrf = ''
      userState.isSignedIn = false
      localStorage.removeItem('user')
      localStorage.removeItem('csrf')
      localStorage.removeItem('signedIn')
    }

    // 提供给子组件使用
    provide('userState', userState)
    provide('updateUser', updateUser)
    provide('clearUser', clearUser)

    return { userState }
  }
}

2. 在登录组件里Inject更新方法 #

import { inject } from 'vue'

export default {
  setup() {
    const updateUser = inject('updateUser')

    const signinSuccessful = (response) => {
      if (!response.data.csrf) {
        this.signinFailed(response)
        return
      }
      updateUser(response.data.user, response.data.csrf)
      this.error = ''
      this.$router.replace('/')
    }

    return { signinSuccessful }
  }
}

3. 在任意子组件里访问用户状态 #

import { inject } from 'vue'

export default {
  setup() {
    const userState = inject('userState')
    return { userState }
  }
}

为什么globalProperties不行？ #

你之前试的app.config.globalProperties.$currentUser = {}之所以不响应式，是因为直接赋值的普通对象不是Vue的响应式对象。就算把它改成reactive({})，全局属性的管理也不如状态库清晰，而且持久化逻辑还要自己单独处理，所以不太推荐。

总结一下，Pinia是最优解，官方支持、状态管理清晰、响应式和持久化都能轻松搞定，完美解决你的两个问题！

备注：内容来源于stack exchange，提问作者Abenezer Daniel