当前位置：首页 > news >正文

Vue3-47-Pinia-修改全局状态变量值的方式

news 2025/7/22 22:16:17

说明

修改全局状态变量的值，是一个比较常规而且常见的操作。
本文就介绍四种常见的操作。
由于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('小红')