vue模块pinia怎么引入

Vue 模块化管理通常采用 Vue 3 的官方推荐库 Vite 和 Pinia 来实现状态管理和组件解耦。Pinia 是由尤雨溪（Yu Weixi）创建的一个轻量级的状态管理模式，它是 Vuex 的替代品，适用于 Vue 3 应用。

以下是使用 Pinia 在 Vue 组件中引入的基本步骤：

1. **安装 Pinia**:
打开终端或命令提示符，进入你的项目目录，然后运行：

   npm install @vue/pinia --save

或者如果使用 Yarn：

   yarn add @vue/pinia

2. **创建 store**: 创建一个名为 `store.js` 或类似的文件，作为你的应用的核心存储区：

   import { createStore } from '@vue/pinia';

   export default createStore({
     state: () => ({
       // 初始化的状态数据
     }),
     actions: {
       // 可调用的方法
     },
     getters: {
       // 计算属性
     },
     mutations: {
       // 状态更新的处理函数
     }
   });

3. **在根组件中使用 store**:
在 App.vue 或 main.js 文件中导入并注入到 Vue 实例中：

   import { useStore } from '@vue/pinia/store';
   
   export default defineComponent({
     setup() {
       const store = useStore();
       
       // 使用 store 中的数据和方法
       // ...
       
       return {
         store
       };
     }
   });

4. **在子组件中访问 store**:
子组件可以通过父组件传入的 store 对象访问共享的状态和功能：

   <script>
   import { ref } from 'vue';
   
   export default {
     setup(props, context) {
       const someState = props.$store.state.someProperty;
       // ...
     }
   };
   </script>