如何全局应用Pinia状态操作？兼询Vue-router全局处理方案

1. 定义 Pinia Store #

首先创建处理登录逻辑的 Store，包含接收user参数的 action：

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

export const useAuthStore = defineStore('auth', {
  state: () => ({
    currentUser: null // 存储当前登录用户信息
  }),
  actions: {
    login(user) {
      // 编写登录逻辑，比如调用后端接口、更新状态
      this.currentUser = user
      // 异步场景可添加await：await api.login(user)
    }
  }
})

2. 组件中调用 Pinia Action #

针对你提供的选项式API代码，改写如下：

import { useAuthStore } from '@/stores/auth'
import { mapActions } from 'pinia'

export default {
  methods: {
    // 映射Pinia的login action到组件方法
    ...mapActions(useAuthStore, ['login']),
    submit(event) {
      event.preventDefault();
      const user = {
        firstName: this.firstName,
        lastName: this.lastName,
      }

      this.login(user) // 替代Vuex的$store.dispatch('login', user)
      this.$router.push('/'); // 路由跳转本身和Pinia无关，如需整合看下方

      this.firstName = '';
      this.lastName = '';
    }
  }
}

如果想把路由跳转整合到 Pinia 的 action 中，可修改 Store 的login方法：

// stores/auth.js
import { defineStore } from 'pinia'
import { useRouter } from 'vue-router'

export const useAuthStore = defineStore('auth', {
  // state部分不变
  actions: {
    async login(user) {
      // 登录逻辑
      this.currentUser = user
      // 直接在action中跳转路由
      const router = useRouter()
      router.push('/')
    }
  }
})

此时组件中只需调用this.login(user)，无需单独写$router.push。

如果需要全局处理登录相关的路由逻辑（比如登录验证、跳转控制），可以使用全局路由守卫：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const routes = [
  { path: '/', component: Home, meta: { requiresAuth: true } }, // 标记需要登录的页面
  { path: '/login', component: Login }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫：检查路由权限
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  // 判断目标路由是否需要登录
  const requiresAuth = to.matched.some(item => item.meta.requiresAuth)
  
  if (requiresAuth && !authStore.currentUser) {
    // 未登录则跳转到登录页
    next('/login')
  } else {
    // 已登录或无需登录，正常跳转
    next()
  }
})

export default router

这样就能全局控制登录状态与路由访问的关联，无需在每个组件单独处理权限判断。

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