pinia在vue3项目中使用

Pinia是Vue 3官方推荐的状态管理模式，由尤雨溪创建并集成到了 Vue.js 中，它是一个轻量级、纯粹基于函数的思想实现的应用状态管理库。Pinia的设计理念类似于Redux，但它更简单易用，更适合于小型到中型的单文件组件应用。

在Vue 3项目中使用Pinia，主要有以下几个步骤：

1. 安装：通过npm或yarn安装`pinia`库：

   npm install pinia vue

2. 创建store：在项目中创建一个名为store.js的文件，声明store实例并定义state、getters、actions和mutations：

   import { createStore } from 'pinia';
   
   export const store = createStore({
     state() {
       // 定义初始状态
       return {
         count: 0,
       };
     },
     getters: {
       getCount(state) {
         return state.count;
       }
     },
     actions: {
       increment(context) {
         context.commit('increment');
       }
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     }
   });

3. 使用store：在需要的地方注入store，并访问其中的数据：

   <script setup>
   import { useStore } from '@pinia/core';
   
   const store = useStore();
   
   function handleClick() {
     store.increment();
   }
   </script>
   <button @click="handleClick">Increment</button>
   <p>{{ store.getCount() }}</p>

4. 提供插件支持：Pinia可以方便地与其他Vue插件配合使用，如Vuex Router Integration等。