Pinia store如何做模块化

1、没安装pinia的先安装

npm i pinia
或 yarn add pinia

2、在src下创建store文件夹

(1)、创建store根文件 index.ts

作用：所有store只需实例一个pinia，导出给main.ts使用。同时统一导出整个modules下的所有store

// store/index.ts
import { createPinia } from "pinia";

// 实例化pinia
export const pinia = createPinia();

// 统一导出整个modules下的所有store
export * from "./modules";

(2)、在store下创建modules文件夹

创建modules根文件 index.ts
作用：统一导出所有子store

// 导出每个store它的一切逻辑
export * from "./shoppingCart"; // 购物车
export * from "./user"; // 用户信息

(3)、子store都这样导出

export const XXX

// store/modules/user.ts
import { defineStore } from "pinia";

export const useUserStore = defineStore("User", {
  state: () => ({
  	loginForm: {},
  }),
  getters: {},
  actions: {},
});

// store/modules/shoppingCart.ts
import { defineStore } from "pinia";

export const useCartStore= defineStore("ShopCart", {
  state: () => ({}),
  getters: {},
  actions: {},
});

3、main.ts 配置pinia

import { pinia } from "./store";
// import { pinia } from "@/store"; // 如果你配置了路径别名则用@

createApp(App)
  .use(pinia)
  .mount("#app");

至此模块化做好了

4、页面如何使用store中的数据或方法

以home.vue为例，如果数据要将做响应式请看 一、基本使用，里面有写

<script setup ts>
 import { useUserStore } from "/store";  // 1、引入
 const useUser = useUserStore(); // 2、实例store 
 const handleClick = () => {    // 3、使用
	console.log(useUser.loginForm) // 变量 
	useUser.login(); //  方法
 }
</script>