pinia使用代码示例

Pinia是一个用于Vue.js的状态管理库，它提供了一种简单且类型安全的方式来管理应用程序的状态。下面是一个使用Pinia的代码示例：

1. 安装Pinia：

   npm install pinia

2. 创建一个Pinia实例：

   import { createPinia } from 'pinia';

   const pinia = createPinia();

3. 定义一个状态模块：

   import { defineStore } from 'pinia';

   export const useCounterStore = defineStore('counter', {
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
       decrement() {
         this.count--;
       },
     },
   });

4. 在Vue组件中使用状态：

   <template>
     <div>
       <p>Count: {{ counter.count }}</p>
       <button @click="counter.increment()">Increment</button>
       <button @click="counter.decrement()">Decrement</button>
     </div>
   </template>

   <script>
   import { useCounterStore } from './store';

   export default {
     setup() {
       const counter = useCounterStore();

       return {
         counter,
       };
     },
   };
   </script>

以上代码示例演示了如何使用Pinia来创建一个计数器的状态模块，并在Vue组件中使用该状态模块来管理计数器的状态。