VueJS如何获取登录页用户选择的站点值并在全页面展示

解决方案 #

这里分两种常用实现方案，可根据项目规模选择：

方案1：使用Pinia/Vuex全局状态管理（推荐，中大型项目适用） #

这是最易维护的方案，全局状态可在所有组件直接访问：

1. 新建全局用户状态store（以Pinia为例）：

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    selectedSiteId: null,
    selectedSiteName: ''
  }),
  actions: {
    setSelectedSite(id, name) {
      this.selectedSiteId = id
      this.selectedSiteName = name
      // 持久化存储，解决页面刷新数据丢失问题
      localStorage.setItem('selectedSite', JSON.stringify({ id, name }))
    },
    // 初始化时从本地存储取数据
    initSiteFromStorage() {
      const site = localStorage.getItem('selectedSite')
      if (site) {
        const { id, name } = JSON.parse(site)
        this.selectedSiteId = id
        this.selectedSiteName = name
      }
    }
  }
})

2. 在login.vue中绑定选择事件，更新全局状态：
   首先给v-select加change事件：

<v-select 
  v-if="step > 0" 
  v-model="userId" 
  label="Select Account" 
  :items="accounts" 
  item-text="owner.name" 
  item-value="id" 
  :rules="[rules.isRequired]" 
  :disabled="step > 1"
  @change="handleSiteSelect"
/>

然后在script中添加处理逻辑：

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const handleSiteSelect = (selectedId) => {
  // 从accounts数组中匹配选中的站点信息
  const selectedSite = accounts.value.find(item => item.id === selectedId)
  if (selectedSite) {
    userStore.setSelectedSite(selectedId, selectedSite.owner.name)
  }
}

// 页面加载时初始化状态，处理登录后刷新的场景
onMounted(() => {
  userStore.initSiteFromStorage()
})

3. 在AppBar.vue中直接引用全局状态展示：

<v-toolbar-title class="d-flex text-center">
  {{ userStore.selectedSiteName }}
</v-toolbar-title>

对应script代码：

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

// 同样初始化本地存储的站点信息
onMounted(() => {
  userStore.initSiteFromStorage()
})

方案2：事件总线（轻量方案，小型项目适用） #

如果项目规模很小不想引入全局状态管理，可以用mitt实现跨组件通信：

1. 安装mitt后新建事件总线实例：

// utils/eventBus.js
import mitt from 'mitt'
export const eventBus = mitt()

2. 在login.vue中选中站点后触发事件：

import { eventBus } from '@/utils/eventBus'

const handleSiteSelect = (selectedId) => {
  const selectedSite = accounts.value.find(item => item.id === selectedId)
  if (selectedSite) {
    const siteName = selectedSite.owner.name
    eventBus.emit('siteSelected', siteName)
    localStorage.setItem('selectedSiteName', siteName)
  }
}

3. 在AppBar.vue中监听事件获取值：

<v-toolbar-title class="d-flex text-center">
  {{ siteName }}
</v-toolbar-title>

import { ref, onMounted, onUnmounted } from 'vue'
import { eventBus } from '@/utils/eventBus'

const siteName = ref('')

onMounted(() => {
  // 先从本地存储取初始化值
  siteName.value = localStorage.getItem('selectedSiteName') || ''
  // 监听站点选择事件
  eventBus.on('siteSelected', (name) => {
    siteName.value = name
  })
})

// 组件销毁时移除监听，避免内存泄漏
onUnmounted(() => {
  eventBus.off('siteSelected')
})

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