vue3 使用pinia数据存储

Vue 3 的 Pinia 是一个基于 Composition API 的状态管理库，用于在 Vue 3 应用程序中管理数据。下面是使用 Pinia 进行数据存储的一般步骤：

1. 安装 Pinia：

   npm install pinia

2. 创建一个 Pinia 实例并导出它，以便在应用程序的入口文件中使用：

   // src/store/index.js
   import { createPinia } from 'pinia';

   export const pinia = createPinia();

3. 在应用程序入口文件（例如 `main.js`）中使用创建的 Pinia 实例：

   import { createApp } from 'vue';
   import App from './App.vue';
   import { pinia } from './store';

   const app = createApp(App);
   app.use(pinia);
   app.mount('#app');

4. 创建一个 store 文件，定义数据存储和相关操作：

   // src/store/count.js
   import { defineStore } from 'pinia';

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

5. 在组件中使用数据存储：

   <template>
     <div>
       <p>Count: {{ count }}</p>
       <p>Double Count: {{ doubleCount }}</p>
       <button @click="increment">Increment</button>
       <button @click="decrement">Decrement</button>
     </div>
   </template>

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

   export default {
     setup() {
       const countStore = useCountStore();

       return {
         count: countStore.count,
         doubleCount: countStore.doubleCount,
         increment: countStore.increment,
         decrement: countStore.decrement,
       };
     },
   };
   </script>

通过以上步骤，你可以在 Vue 3 应用程序中使用 Pinia 进行数据存储。你可以定义状态、计算属性和操作，并在组件中使用它们。