Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.43k stars 461 forks source link

[t-config-provider] vue3.4子组件inject globalConfig不具备响应式 #4611

Closed aolyang closed 3 days ago

aolyang commented 5 days ago

tdesign-vue-next 版本

1.10.1

重现链接

https://stackblitz.com/edit/angular-fvhxrp-77bkvd?file=package.json

重现步骤

任意 vue3.4以上的版本,用的另一个issue的连接。

期望结果

globalconfig具备响应,子组件国际化能通过globalconfig影响

实际结果

globalConfig无响应

框架版本

Vue3.4

补充说明

<script>
const globalConfig = computed(() => {
    return locale.value === "zh-CN" ? zhCN : enUS
})
</script>
<template>
  <TConfigProvider :globalConfig="globalConfig">
      <TAlert :max-line="2">
          <-- ... !-->
      </TAlert>
  </TConfigProvider>
</template>

devtools查看 config-provider 中的globalConfig是具备响应式的 本地组件手动inject也是可以的,但是 TAlert 中的不会变 最终定位是computed返回的对象保持了引用: https://github.com/Tencent/tdesign-vue-next/blob/ada18a13fcf3af25bfd1683d30457a334e2bf014/src/config-provider/useConfig.tsx#L70-L75

参考useConfig 本地node_modules手动修改测试可行:

-mergeWith(defaultData as unknown as GlobalConfigProvider, props.globalConfig),
+Object.assign({}, mergeWith(defaultData as unknown as GlobalConfigProvider, props.globalConfig)),
github-actions[bot] commented 5 days ago

👋 @aolyang,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

aolyang commented 5 days ago

相关issue #3854

quick fix: 使用patch功能,修改(es/esm/cjs/lib)的useConfig.mjs 文件,⚠ 注意是否使用了AutoImport插件

var provideConfig = function provideConfig(props) {
  var defaultData = cloneDeep_1(defaultGlobalConfig);
  var mergedGlobalConfig = computed(function () {
-    return mergeWith(defaultData, props.globalConfig);
+    return Object.assign({}, mergeWith(defaultData, props.globalConfig));
  });
  provide(configProviderInjectKey, mergedGlobalConfig);
  if (!globalConfigCopy.value) {
    globalConfigCopy.value = mergedGlobalConfig.value;
  }
  return mergedGlobalConfig;
};
uyarn commented 3 days ago

fixed 1.10.2