Vue导航栏登录状态切换报错：Cannot read properties of undefined (reading 'dispatch')

问题场景 #

需要实现导航栏的登录状态切换：未登录时显示Login、Register选项，登录成功后切换为Logout、Profile选项，但运行应用时触发错误：Nav.vue?6cee:38 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch')

错误原因 #

1. Vuex Store未正确注入到Vue应用实例中，导致useStore()无法获取有效的store实例，进而调用dispatch时触发undefined报错。
2. 组件内声明的本地flag变量与Vuex状态完全脱节，无法响应式同步状态变化，模板判断逻辑失效。

修复步骤 #

1. 确保Vuex Store正确挂载到应用 #

在项目入口文件（如main.ts/main.js）中，必须将创建好的store挂载到Vue实例：

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

const app = createApp(App)
app.use(store) // 关键：注入Vuex Store
app.mount('#app')

2. 修改Nav.vue，正确关联Vuex状态 #

将组件内本地变量替换为响应式的Vuex状态引用，确保模板能实时同步状态变化：

<template>
  <v-app>
    <v-main>
      <v-app-bar>
        <router-link v-if="!isLoggedIn" to="/login" class="btn">Login</router-link>
        <router-link v-if="!isLoggedIn" to="/register" class="btn">Register</router-link>
        <router-link v-if="isLoggedIn" to="/logout" class="btn">Logout</router-link>
        <router-link v-if="isLoggedIn" to="/profile" class="btn">Profile</router-link>
      </v-app-bar>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
import { useStore } from "vuex"
import { computed } from "vue"

export default {
  name: "app-app",
  setup() {
    const store = useStore()
    
    // 用computed响应式获取Vuex中的登录状态
    const isLoggedIn = computed(() => store.state.flag)

    const checkAuth = () => {
      const hasToken = localStorage.getItem("token")
      store.dispatch('setFlag', !!hasToken)
    }

    // 初始化时检查登录状态
    checkAuth()

    // 监听localStorage变化，同步跨页面状态
    window.addEventListener('storage', checkAuth)

    return {
      isLoggedIn,
      checkAuth
    }
  }
}
</script>

3. 简化Vuex Store代码（可选） #

如果使用JavaScript开发，可简化类型声明；TypeScript环境可保留原类型定义：

import { createStore } from 'vuex'

export default createStore({
  state: {
    flag: false
  },
  mutations: {
    setFlag(state, flag) {
      state.flag = flag
    }
  },
  actions: {
    setFlag(context, flag) {
      context.commit('setFlag', flag)
    }
  },
  modules: {}
})

4. 额外检查项 #

• 确认Vue与Vuex版本兼容：Vue3需搭配Vuex 4.x，Vue2需搭配Vuex 3.x
• 验证登录逻辑是否正确将token存入localStorage，确保localStorage.getItem("token")能返回有效值

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