网站建设优化服务资讯,商务网站建设课程设计,wordpress做小程序商城,东莞市工程建设中心使用说明 在 Pinia 中#xff0c;获取状态变量的方式非常的简单 #xff1a; 就和使用对象一样。 使用思路 #xff1a; 1、导入Store#xff1b;2、声明Store对象#xff1b;3、使用对象。 在逻辑代码中使用 但是 Option Store 和 Setup Store 两种方式定义的全局状态变量…使用说明 在 Pinia 中获取状态变量的方式非常的简单 就和使用对象一样。 使用思路 1、导入Store2、声明Store对象3、使用对象。 在逻辑代码中使用 但是 Option Store 和 Setup Store 两种方式定义的全局状态变量在获取的时候还是有简单的区别的 Option Store : 声明Store对象之后可以直接使用属性例如 【store.name】 Setup Store : 声明Store对象之后可以获取到定义的声明式对象所以使用具体属性时需要通过 该对象例如 【store.student.name】 在html模板中使用 此处非常的简单Store对象中有一个$state 属性这个属性就是我们定义的全局状态变量。 下面通过具体的案例体会一下。
具体案例 本案例 有一个全局状态变量的 配置文件分别通过 Option Store 和 Setup Store 两种方式定义了两个全局状态变量 在组件A 中 导入两个全局状态变量并分别在控制台 和 页面模板中读取展示一下; 在 App.vue 文件中 存在 router-view 标签用于组件的路由。 全局状态变量配置文件
// 导入 defineStore API
import { defineStore } from pinia// 导入 reactive 依赖
import { reactive } from vue// 定义全局状态方式一 option store
export const useClassStore defineStore(classinfo,{state: () ({name:快乐篮球二班,studentNum:30})})// 定义全局状态方式二 setup store
export const useStudentStore defineStore(studentinfo,() {// 响应式状态 student 是响应式对象const student reactive({name : 小明,age:12,className:快乐足球一班})return { student }})
App.vue 组件
templatediv classbasedivAPP.vue 中的 msg : {{ msg }}brbr!-- 组件放在这里 --router-view/router-view/div/templatescript setup langts// 引入 provide 方法import { ref } from vue// 声明父组件的一个变量const msg ref(这是App根组件的msg变量)/scriptstyle scoped.basediv{width: 600px;height: 400px;border: 1px solid red;}
/style组件A 的代码
templatediv classdiva这是组件Abrbr!-- 使用 $state 来读取全局状态变量 --classStore : {{ classStore.$state }}brstudentStore : {{ studentStore.$state }}/div/templatescript setup langts// 导入全局状态变量的定义import { useClassStore,useStudentStore } from ./storea// 获取全局状态变量的对象const classStore useClassStore()const studentStore useStudentStore()// 读取一下全局的变量console.log(组件A 中 ,classStore)console.log(组件A 中 ,studentStore)// Option Store 的方式 直接可以获取到属性console.log(组件A 中 classinfo 对象 ,classStore.name - classStore.studentNum)// Setup Store 的方式 仍然需要通过 定义的 student 对象因为这个student 是真正的全局状态对象console.log(组件A 中 studentinfo 数据对象 ,studentStore.student.name-studentStore.student.age-studentStore.student.className)console.log(------)/scriptstyle scoped.diva{width: 450px;height: 250px;background: red;}
/style运行结果
