怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

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

image-20220813214130873

<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

posted on   超级无敌美少男战士  阅读(524)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
点击右上角即可分享
微信分享提示