简单介绍 pinia 的使用

Pinia 是 Vue.js 的状态管理库，它用于管理组件间共享的状态。其设计灵感来自于 Vuex 4，但更加简洁和模块化。Pinia 可以被看作是 Vuex 的替代方案，但其核心思想是提供一个简单、轻量、但同时具备Vuex核心特性的状态管理解决方案。

使用 Pinia 主要包含以下几个步骤：

1. 安装 Pinia：
你可以通过 npm 或 yarn 来安装 Pinia。

   npm install pinia
   # 或者
   yarn add pinia

2. 创建一个 Pinia store：
在你的 Vue 应用中，你可以创建一个或多个 store 来管理状态。每个 store 都是一个带有状态（state）、getter、actions 的对象。

   import { defineStore } from 'pinia';

   export const useCounterStore = defineStore('counter', {
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
     },
     getters: {
       doubleCount: (state) => state.count * 2,
     },
   });

3. 在组件中使用 store：
在 Vue 组件中，你可以通过 `useStore` 方法来访问和操作 store 中的状态和方法。

   <template>
     <div>
       <p>Count: {{ store.count }}</p>
       <button @click="store.increment">Increment</button>
     </div>
   </template>

   <script>
   import { useCounterStore } from '@/stores/counter';

   export default {
     setup() {
       const store = useCounterStore();
       return { store };
     },
   };
   </script>

4. 启用 Pinia：
最后，需要将 Pinia 添加到 Vue 应用中。

   import { createApp } from 'vue';
   import { createPinia } from 'pinia';
   import App from './App.vue';
   import { useCounterStore } from '@/stores/counter';

   const app = createApp(App);
   const pinia = createPinia();

   app.use(pinia);
   app.mount('#app');

通过以上步骤，你就可以在 Vue 应用中使用 Pinia 来管理状态了。Pinia 提供了响应式的状态管理，使得状态的跟踪和调试更加方便。