router pinia

`pinia`是Vue 3框架中官方推荐的状态管理模式，由尤雨溪（You Xuyi）创建并引入于Vue 3.5版本，它类似于React的Redux或Vue 2.x中的Vuex。Pinia的设计理念是轻量级、无侵入性和组件化，主要用于管理应用中的全局状态。

`router`（路由管理器）和`pinia`通常是配合使用的。当我们在处理路由变化时可能会涉及到状态的更新，比如在导航到新的页面时需要加载特定的数据或者切换显示的内容。在这种场景下，你可以创建一个pinia store专门用于存储与路由相关的数据，并在store中设置getter和actions，以便在路由守卫（guard）或者组件钩子里响应式地获取和改变状态。

例如，在pinia中，你可能会有这样一个结构：

import { createStore } from '@vue-pinejs/core'
export const routerStore = createStore({
  state: {
    selectedRouteData: {}
  },
  actions: {
    async fetchData({ commit }, route) {
      // 异步从API获取数据
      const data = await fetch(route.dataKey)
      commit('updateSelectedRouteData', data)
    },
    updateSelectedRouteData(state, newData) {
      state.selectedRouteData = newData
    }
  },
  getters: {
    getSelectedRouteData() {
      return this.state.selectedRouteData
    }
  }
})

然后在路由器的守卫中，可以注入这个store，并根据需要调用action和getter。