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;
}
相关推荐
icebreaker21 分钟前
Mokup:构建工具友好的可视化 Mock 工具
前端·javascript·后端
禾叙_38 分钟前
【netty】Channel
开发语言·javascript·ecmascript
简单Janeee1 小时前
[Vue 3 从零到上线]-第三篇:网页的指挥官——指令系统 (v-if, v-for, v-bind, v-on)
前端·javascript·vue.js
陈广亮2 小时前
告别 JSON.parse(JSON.stringify()) — 原生深拷贝 structuredClone
javascript
Trae1ounG2 小时前
这是json
前端·javascript·vue.js
叫我一声阿雷吧2 小时前
【JS实战案例】实现图片懒加载(基础版)原生JS+性能优化,新手可直接复现
开发语言·javascript·性能优化·js图片懒加载
前端程序猿i3 小时前
第 8 篇:Markdown 渲染引擎 —— 从流式解析到安全输出
开发语言·前端·javascript·vue.js·安全
css趣多多3 小时前
resize.js
前端·javascript·vue.js
掘金安东尼4 小时前
零 JavaScript 的性能优化视频嵌入
前端·javascript·面试
Filotimo_4 小时前
Vue 选项式 API vs 组合式 API:区别全解析
前端·javascript·vue.js