用php做网站要多久,建行官方网站多少钱,设计网站页面教案,作文网小学说明 修改全局状态变量的值#xff0c;是一个比较常规而且常见的操作。 本文就介绍四种常见的操作。 由于Option Store 和Setup Store 在修改的时候略有不同#xff0c;所以本文也会将不同点体现一下。 全局状态变量的定义 包含了 Option Store 和Setup Store 两种定义方式是一个比较常规而且常见的操作。 本文就介绍四种常见的操作。 由于Option Store 和Setup Store 在修改的时候略有不同所以本文也会将不同点体现一下。 全局状态变量的定义 包含了 Option Store 和Setup Store 两种定义方式 在下面的修改操作中会根据这两种不同的定义来分别阐述。 // 导入 defineStore API
import { defineStore } from pinia// 导入 reactive 依赖
import { reactive } from vue// 定义全局状态方式一 option store
export const useClassStore defineStore(classinfo,{state: () ({name:快乐篮球二班,studentNum:30}),actions:{// 用来更新状态的值updateName(){this.name 使用actions修改的name}}})// 定义全局状态方式二 setup store
export const useStudentStore defineStore(studentinfo,() {// 响应式状态const student reactive({name : 小明,age:12,className:快乐足球一班})// 直接定义一个方法进行数据属性的修改const updateName (nameP:string){student.name nameP}return { student,updateName }})
方式一 直接修改 直接修改 就是直接读取对象进行变量值的替换。 Option Store // 导入全局状态变量的定义import { useClassStore } from ./storea// 获取全局状态变量的对象const classStore useClassStore()// 方式一 直接修改classStore.studentNum 36Setup Store // 导入全局状态变量的定义import { useStudentStore } from ./storea// 获取全局状态变量的对象const studentStore useStudentStore()// 方式一 直接修改studentStore.student.className 我也不知道是哪个班的方式二 $patch 方式修改 参数是一个对象的形式 Option Store 直接放入 【参数对象】 {key:value} 就OK了 // 导入全局状态变量的定义import { useClassStore } from ./storea// 获取全局状态变量的对象const classStore useClassStore()// 方式二 $patch 方法修改classStore.$patch({studentNum:20})Setup Store 由于 状态变量在定义的时候就是一个响应式对象所以需要把整个的对象都放进去才OK。 // 导入全局状态变量的定义import { useStudentStore } from ./storea// 获取全局状态变量的对象const studentStore useStudentStore()// 方式二 $patch 方法修改studentStore.$patch({student:{name: studentStore.student.name,age: studentStore.student.age,className:又换了一个班级}})方式三 $patch 带参数的方式修改 参数是 函数的形式且函数的参数就是 原state对象 这种方式用起来比【方式二】要更加灵活。 Option Store // 导入全局状态变量的定义import { useClassStore } from ./storea// 获取全局状态变量的对象const classStore useClassStore()// 方式三 $patch 函数参数的方法修改 : 函数的参数就是 状态对象classStore.$patch((state){console.log(state)state.studentNum 100})Setup Store // 导入全局状态变量的定义import { useStudentStore } from ./storea// 获取全局状态变量的对象const studentStore useStudentStore()// 方式三 $patch 函数参数的方法修改 : 函数的参数就是 状态对象studentStore.$patch((state){console.log(state)state.student.className 超级无敌快乐踢足球的班})方式四 actions方法的方式进行修改 这种方式比较好理解就是通过调用已经定义好的方法的方式来进行变量值的修改。 也比较推荐使用这一种方式。 Option Store // 导入全局状态变量的定义import { useClassStore } from ./storea// 获取全局状态变量的对象const classStore useClassStore()// 方式四 actions 方法的方式进行数据的修改classStore.updateName()Setup Store // 导入全局状态变量的定义import { useStudentStore } from ./storea// 获取全局状态变量的对象const studentStore useStudentStore()// 方式四 actions 方法的方式进行数据的修改studentStore.updateName(小红)
