VUE缓存（切换页面保留选中条目）PINIA状态管理

Pinia 是 Vue 官方推荐的状态管理库，用来在多个组件之间 共享和管理数据。

为什么需要 Pinia？

在 Vue 项目中，如果你：
有 多个组件需要共享相同数据（比如当前选中的条目）
或者想让一个状态在 页面跳转后依然保留
想要让数据管理 更清晰、更可控

// store/selectedItem.ts
import { defineStore } from 'pinia';

export const useSelectedItemStore = defineStore('selectedItem', {
  state: () => ({
    currentSelectedItem: null
  }),
  actions: {
    setSelectedItem(item) {
      this.currentSelectedItem = item;
    }
  }
});

ps:这里面this相当于store对象本身

在组件中获取选中项

const store = useSelectedItemStore();
const selected = store.currentSelectedItem; // 获取选中项

在销毁改组件时清空缓存 置空

onUnmounted(() => {
store.setSelectedItem(null);
});

在父组件中改变子组件的打开挂载值

子组件.value.setItem(store.currentSelectedItem)

子组件中

const setItem = (item) => {
	currentItem.value = item;
}
defineExpose({
    currentItem,
    setItem,
  });

为什么要通过调用子组件中的方法来实现子组件的更新
而不是直接赋值
leftTreeRef.value.currentItem = store.currentSelectedItem

这个方法表面上没错，但实际问题在于：子组件中的 currentItem 是 ref({})，直接赋值 ref.value.currentItem = xxx，并不会触发视图更新，
因为只是改了 ref 里的属性，而不是通过子组件自身的逻辑去更新。
在 leftTree.vue 中暴露一个方法，比如叫 setSelectedItem，在方法里执行 currentItem.value = item;，确保同时更新视图。