Vue3 Pinia如何修改全局状态变量值
作者:NorthCastle
这篇文章主要介绍了Vue3 Pinia如何修改全局状态变量值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
说明
修改全局状态变量的值,是一个比较常规而且常见的操作。
本文就介绍四种常见的操作。
由于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 = 36
Setup 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('小红')
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。