pinia的模块划分
pinia 的模块划分是通过 js 命名来划分的。
示例:
第一步:拆分 store 文件
- store/index.ts
创建一个store对象,并导出
import { createPinia } from "pinia" const store = createPinia() export default store
- store/user.ts
用户store
import {defineStore} from "pinia" export const useUserStore = defineStore({ //js命名 id: "user", state: () => { return { name: '张三', age: 18 } } })
- store/order.ts
订单store
import {defineStore} from "pinia" export const useOrderStore = defineStore({ //js命名 id: "order", state: () => { return { orderList: [{id: 1001, total: 6666}, {id: 1002, total: 8888}, {id: 1003, total: 9999}] } } })
第二步:vue
- User.vue
使用用户store
<template> User:{{ name }} == {{ age }} </template> <script setup lang="ts"> import {storeToRefs} from "pinia" import {useUserStore} from "@/store/module/user" const userStore = useUserStore() const {name, age} = storeToRefs(userStore) </script>
- Order.vue
使用订单store
<template> order <br> {{order}} </template> <script setup lang='ts'> import {storeToRefs} from "pinia" import {useOrderStore} from "@/store/module/order" const orderStore = useOrderStore() const order = storeToRefs(orderStore) </script>
原文地址 blog.csdn.net
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验