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;
}
相关推荐
2401_8654396340 分钟前
CSS中隐藏元素的多重技巧与应用场景
开发语言·前端·javascript
烛衔溟1 小时前
TypeScript 中的类基础
javascript·ubuntu·typescript
mCell1 小时前
从云相册的缩略图说起:Bun.Image 让我告别 sharp
javascript·图片资源·bun
ljt27249606612 小时前
Vue笔记(三)--用户交互
javascript·vue.js·笔记
Martin -Tang2 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
ZC跨境爬虫3 小时前
跟着 MDN 学 HTML day_58:(构建行星数据表——HTML表格高级实战指南)
前端·javascript·ui·html·音视频
kyriewen3 小时前
用户打开飞行模式都能打开你的网站?Service Worker 做离线缓存,PWA 实战
前端·javascript·面试
栉甜3 小时前
APIs学习
前端·javascript·css·学习·html
zithern_juejin3 小时前
ES6——Symbol
javascript
代码煮茶3 小时前
Vue3 组件库二次封装实战 | 基于 Element Plus 封装企业级 UI 组件库
前端·javascript·vue.js