vue3 使用 pinia 存储

Vue 3 中，Pinia 是由 Vue.js 官方团队推荐的状态管理模式，它是一个轻量级、专注于状态管理的库，基于 Vuex 的理念设计，但更加简单易用。在 Pinia 中，你可以像使用 JavaScript 对象一样存储数据，主要步骤如下：

1. **安装**：首先需要安装 `pinia` 和 `@vueuse/core`（如果还没安装的话）：

   npm install pinia @vueuse/core

2. **创建 store**: 创建一个名为 `store.js` 或类似文件，并导入 `createStore` 函数：

   import { createStore } from '@vueuse/core';
   export const store = createStore({
     state: () => ({
       // 初始化的数据
       myData: '初始值',
     }),
     mutations: {
       updateData(state, newData) {
         state.myData = newData;
       },
     },
   });

3. **注入到组件**: 在需要使用数据的组件中通过 `inject` 注入 store：

   import { useStore } from '@vueuse/store';
   export default {
     setup() {
       const store = useStore(store);
       return { myData: store.myData, ... };
     }
   };

4. **修改和获取数据**: 通过 `mutations` 更新数据，使用响应式的属性直接访问。