在 Vue3 中,响应式数据是通过 reactiveref 函数来创建的,而直接修改对象属性的值是不会触发响应式更新的。

如果希望在修改对象属性时触发响应式更新,可以将对象转换为响应式对象,例如使用 reactive 函数将 globalConfigure 转换为响应式对象,然后再修改属性的值,例如:

import { reactive, toRefs } from 'vue'

const state = reactive({
  globalConfigure: {
    // ...
  }
})

Object.keys(toRefs(state.globalConfigure)).forEach((key) => {
  if (changeAttribute === key) {
    state.globalConfigure[key] = change
  }
})

这样修改 globalConfigure 对象属性的值时,就会触发响应式更新。

vue3 ts 这样设置值没有响应式 ObjectkeystoRefsglobalConfigureforEachkey = if changeAttribute === key globalConfigurekey = change

原文地址: https://www.cveoy.top/t/topic/eiQF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录