pinia的使用

Pinia是一个Vue的状态管理库，它允许我们跨组件或页面共享状态。下面是使用Pinia的步骤：

1. 安装Pinia

   npm install pinia
   # 或者
   yarn add pinia
   

2. 创建Pinia store

   import { createPinia } from 'pinia';
   
   export const useStore = createPinia();
   

3. 定义State和Getters

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

4. 在Vue组件中使用store

   <template>
     <div>
       <p>{{ count }}</p>
       <p>{{ doubleCount }}</p>
       <button @click="increment">Increment</button>
       <button @click="decrement">Decrement</button>
     </div>
   </template>
   
   <script>
   import { useCounterStore } from '../store/counter';
   
   export default {
     setup() {
       const counterStore = useCounterStore();
       return {
         count: counterStore.$state.count,
         doubleCount: counterStore.doubleCount,
         increment: counterStore.increment,
         decrement: counterStore.decrement,
       };
     },
   };
   </script>