Vue.js中如何在Login组件操作后设置Header组件的数据值？（Vue CLI）

AI 小北

2026-5-22

Hey there! Let's walk through the most practical ways to update your Header.vue component's data once you've completed an action in Login.vue when using Vue CLI. These approaches cover different project sizes and use cases, so you can pick what fits best:

1. Use State Management (Vuex for Vue2, Pinia for Vue3)

This is the most scalable and recommended approach for medium to large projects, as it centralizes your app's state and makes it accessible across components.

Vue2 with Vuex

First, set up your Vuex store (usually in src/store/index.js):

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: null // This will hold the data we want to pass to Header
  },
  mutations: {
    // Mutations update the state directly
    SET_USER_INFO(state, payload) {
      state.userInfo = payload
    }
  },
  actions: {
    // Actions handle async logic (if needed) and commit mutations
    updateUserInfo({ commit }, userData) {
      commit('SET_USER_INFO', userData)
    }
  },
  getters: {
    // Getters let you access state in a computed-like way
    getUserInfo: state => state.userInfo
  }
})

In Login.vue, dispatch the action after your login logic:

<template>
  <button @click="handleLogin">Complete Login</button>
</template>

<script>
export default {
  methods: {
    handleLogin() {
      // Replace this with your actual login logic (API call, etc.)
      const loggedInUser = { name: 'Salin Kunwar', email: 'salin@example.com' }
      
      // Update the Vuex state
      this.$store.dispatch('updateUserInfo', loggedInUser)
    }
  }
}
</script>

In Header.vue, access the state using a getter:

<template>
  <div class="header">
    <span v-if="userInfo">Welcome back, {{ userInfo.name }}!</span>
    <span v-else>Please log in</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // Map the getter to a local computed property
    ...mapGetters(['getUserInfo'])
  }
}
</script>

Vue3 with Pinia

Pinia is the official state management tool for Vue3, simpler and more intuitive than Vuex. First install it:

npm install pinia

Set up Pinia in main.js:

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

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

Create a store (e.g., src/store/user.js):

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  actions: {
    setUserInfo(userData) {
      this.userInfo = userData
    }
  },
  getters: {
    getUserInfo: (state) => state.userInfo
  }
})

In Login.vue (using <script setup>):

<template>
  <button @click="handleLogin">Complete Login</button>
</template>

<script setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const handleLogin = () => {
  const loggedInUser = { name: 'Salin Kunwar', email: 'salin@example.com' }
  userStore.setUserInfo(loggedInUser)
}
</script>

In Header.vue:

<template>
  <div class="header">
    <span v-if="userInfo">Welcome back, {{ userInfo.name }}!</span>
    <span v-else>Please log in</span>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/user'
import { computed } from 'vue'

const userStore = useUserStore()
// Use computed to react to state changes
const userInfo = computed(() => userStore.getUserInfo)
</script>

2. Event Bus (For Small Projects)

If your project is small and you don't want to set up state management, an event bus works well for component communication.

Vue2 Event Bus

Create the bus in main.js:

import Vue from 'vue'
export const EventBus = new Vue()

In Login.vue, emit an event with your data:

<template>
  <button @click="handleLogin">Complete Login</button>
</template>

<script>
import { EventBus } from '@/main.js'

export default {
  methods: {
    handleLogin() {
      const loggedInUser = { name: 'Salin Kunwar' }
      // Emit an event with the data
      EventBus.$emit('user-updated', loggedInUser)
    }
  }
}
</script>

In Header.vue, listen for the event and update local data:

<template>
  <div class="header">
    <span v-if="userName">Welcome back, {{ userName }}!</span>
    <span v-else>Please log in</span>
  </div>
</template>

<script>
import { EventBus } from '@/main.js'

export default {
  data() {
    return {
      userName: null
    }
  },
  mounted() {
    // Listen for the event
    this.userUpdateListener = EventBus.$on('user-updated', (userData) => {
      this.userName = userData.name
    })
  },
  beforeDestroy() {
    // Clean up the listener to avoid memory leaks
    EventBus.$off('user-updated', this.userUpdateListener)
  }
}
</script>

Vue3 Event Bus (Using `mitt`)

Vue3 doesn't have a built-in event bus, so we use the mitt library. First install it:

npm install mitt

Set it up in main.js:

import { createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'

const emitter = mitt()
const app = createApp(App)
app.config.globalProperties.$emitter = emitter
app.mount('#app')

In Login.vue:

<template>
  <button @click="handleLogin">Complete Login</button>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const handleLogin = () => {
  const loggedInUser = { name: 'Salin Kunwar' }
  app.appContext.config.globalProperties.$emitter.emit('user-updated', loggedInUser)
}
</script>

In Header.vue:

<template>
  <div class="header">
    <span v-if="userName">Welcome back, {{ userName }}!</span>
    <span v-else>Please log in</span>
  </div>
</template>

<script setup>
import { getCurrentInstance, onUnmounted, ref } from 'vue'

const userName = ref(null)
const app = getCurrentInstance()
const emitter = app.appContext.config.globalProperties.$emitter

const updateUserName = (userData) => {
  userName.value = userData.name
}

// Listen for the event
emitter.on('user-updated', updateUserName)

// Clean up on unmount
onUnmounted(() => {
  emitter.off('user-updated', updateUserName)
})
</script>

If Login.vue and Header.vue are both children of a common parent (like App.vue), you can pass data up to the parent and then down to the header via props.

In App.vue (the parent):

<template>
  <Header :userInfo="userInfo" />
  <Login @update-user="updateUserInfo" />
</template>

<script>
import Header from './components/Header.vue'
import Login from './components/Login.vue'

export default {
  components: { Header, Login },
  data() {
    return {
      userInfo: null
    }
  },
  methods: {
    updateUserInfo(userData) {
      this.userInfo = userData
    }
  }
}
</script>

In Login.vue, emit the data to the parent:

<template>
  <button @click="handleLogin">Complete Login</button>
</template>

<script>
export default {
  methods: {
    handleLogin() {
      const loggedInUser = { name: 'Salin Kunwar' }
      this.$emit('update-user', loggedInUser)
    }
  }
}
</script>

In Header.vue, receive the data as a prop:

<template>
  <div class="header">
    <span v-if="userInfo">Welcome back, {{ userInfo.name }}!</span>
    <span v-else>Please log in</span>
  </div>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: null
    }
  }
}
</script>

Quick Recommendation

For most projects, go with Pinia (Vue3) or Vuex (Vue2) — it keeps your state organized and easy to maintain as your app grows.
Use the event bus only for small, simple apps where state management feels overkill.
Parent prop passing works well if the components are closely related and you don't need the data elsewhere in the app.

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

Vue.js中如何在Login组件操作后设置Header组件的数据值？（Vue CLI）

1. Use State Management (Vuex for Vue2, Pinia for Vue3) #

Vue2 with Vuex #

Vue3 with Pinia #

2. Event Bus (For Small Projects) #

Vue2 Event Bus #

Vue3 Event Bus (Using mitt) #

3. Parent Component Prop Passing (If They Share a Parent) #

Quick Recommendation #