pinia中使用reactive声明变量,子页面使用时,值未改变,即不是响应式的(解决方法)

reactive赋值无效!reactive 不要直接data=赋值!!!会丢失响应式的,只能通过obj.属性 = 属性值赋值

方法一.
pinia 中直接使用ref定义变量即可

复制代码
export const useUserStore=defineStore('user',()=>{
    let loginUser=reactive({})
    return {
        loginUser
    }

})

方法二:

pinia中仍使用reactive ,通过obj.属性 = 属性值赋值

复制代码
将这里
const testObject = reactive({
	show:false,
	titleL:'这里是标题!'
});
改为
const testObject = reactive({
	aa:{
		show:false,
		titleL:'这里是标题!'
	}
});

赋值操作改为:

const clickHandle = (e)=>{
	testObject.aa.show = e.traget.checked;
}
相关推荐
子春一1 分钟前
Flutter for OpenHarmony:构建一个优雅的 Flutter 每日一句应用,深入解析状态管理、日期驱动内容与 Material 3 交互动效
javascript·flutter·交互
qq_336313933 分钟前
javaweb-Ajax
前端·javascript·ajax
豆约翰3 分钟前
句子单词统计 Key→Value 动态可视化
开发语言·前端·javascript
摘星编程4 分钟前
OpenHarmony环境下React Native:useState函数式更新
javascript·react native·react.js
珑墨13 分钟前
【pnpm 】pnpm 执行 xxx 的 底层原理
前端·javascript
弹简特22 分钟前
【JavaEE03-前端部分】JavaScript入门:给网页注入灵魂,从基础到实战玩转交互!
前端·javascript·交互
jiayong2324 分钟前
Vue 3 面试题 - 状态管理与数据流
前端·javascript·vue.js
2401_8920005210 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加提醒实现
前端·javascript·flutter
Yolanda9410 小时前
【项目经验】vue h5移动端禁止缩放
前端·javascript·vue.js
EndingCoder11 小时前
案例研究:从 JavaScript 迁移到 TypeScript
开发语言·前端·javascript·性能优化·typescript