pinia保存vue3的菜单状态

要使用Pinia保存Vue3的菜单状态，可以按照以下步骤进行：

1. 安装Pinia：使用npm或yarn安装Pinia依赖包。

2. 创建一个菜单状态store：使用Pinia的createStore方法创建一个菜单状态store，例如：

import { createStore } from 'pinia'

export const menuStore = createStore({
  state: () => ({
    isOpen: false,
    activeItem: null
  }),
  actions: {
    toggleMenu() {
      this.isOpen = !this.isOpen
    },
    setActiveItem(item) {
      this.activeItem = item
    }
  }
})

这个store有两个状态：isOpen表示菜单是否打开，activeItem表示当前选中的菜单项。同时还定义了两个actions：toggleMenu用于切换菜单的打开状态，setActiveItem用于设置当前选中的菜单项。

3. 在组件中使用store：在需要使用菜单状态的组件中，可以使用Pinia的useStore方法获取到创建的菜单状态store，例如：

import { defineComponent } from 'vue'
import { useStore } from 'pinia'
import { menuStore } from './menuStore'

export default defineComponent({
  setup() {
    const store = useStore(menuStore)

    function handleClick(item) {
      store.setActiveItem(item)
      store.toggleMenu()
    }

    return {
      store,
      handleClick
    }
  }
})

在这个组件中，通过useStore方法获取到menuStore，然后可以使用store中定义的状态和actions。例如，在handleClick函数中，先使用store.setActiveItem方法设置当前选中的菜单项，然后再使用store.toggleMenu方法切换菜单的打开状态。

这样就可以使用Pinia保存Vue3的菜单状态了。