原生js使用pinia

Pinia是Vue 3官方推荐的状态管理模式，它是一个轻量级的状态管理库，用于组织和管理应用中的共享状态。在JavaScript中，原生使用Pinia主要涉及以下几个步骤：

1. **安装**：
首先确保已经安装了Vue 3及其生态系统，然后通过npm或yarn安装`@vue/pinia`：

   npm install @vue/pinia
   # 或者
   yarn add @vue/pinia

2. **创建store**：
创建一个名为store.js的文件，使用`createStore`函数创建一个新的Pinia实例：

   import { createStore } from '@vue/pinia';

   const store = createStore({
     id: 'myStore',
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
     },
     getters: {
       getCount() {
         return this.count;
       },
     },
   });

3. **注入store到组件**：
在Vue组件中，需要通过Vue的Composition API中的`provide`和`inject`来注入store。在父组件提供：

   export default {
     setup() {
       provide('myStore', store);
       return {};
     },
   };

在子组件中注入并使用：

   <script>
   import { inject } from 'vue';
   export default {
     setup() {
       const myStore = inject('myStore');
       console.log(myStore.getCount()); // 获取状态
       myStore.increment(); // 执行动作
       return {};
     },
   };
   </script>

4. **守卫生命周期**：
如果需要在组件切换时更新状态，可以使用`useAppInit`或`useAppTick`钩子。

5. **销毁store**：
在全局组件卸载前，建议手动调用`store.$unmount()`以释放内存。