首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue组合api -使用组件道具的全局状态可组合

Vue组合api -使用组件道具的全局状态可组合
EN

Stack Overflow用户
提问于 2022-07-26 02:46:27
回答 1查看 221关注 0票数 0

在我的应用程序中有一个可组合的名为useLocalization的程序。它提供基于用户语言首选项的翻译字符串,并在整个应用程序中使用。

问题是,可以配置useLocalization并接受以下参数,但我不知道将这些参数从根组件传递到可组合的最佳方式是什么:

代码语言:javascript
运行
AI代码解释
复制
 interface ILocalizationProps {
    currentLocale: Ref<string>
    fallbackLocale: Ref<string>
    locales: Ref<Partial<ILocale>[]>
  }

使用useLocalization的根组件接受与props相同的参数,因此消费应用程序可以配置/重写所使用的语言。

代码语言:javascript
运行
AI代码解释
复制
const DEFAULT_LANG = 'en'
export const withLocalizationProps = () => ({
    currentLocale: { type: String, default: null },
    fallbackLocale: { type: String, default: DEFAULT_LANG },
    locales: { type: Array as () => Partial<ILocale>[], default: () => [] },
})

如何使用传递给根组件的支持来初始化可组合的?以下是我发现的问题:

  1. useLocalization(props)在这里不起作用,因为组件树中没有更深层次的道具。
  2. 使用provide/inject,我可以在provide部件中使用props,并获得正确配置的inject版本,但这阻止了我在根组件中使用useLocalization,因为注入不可用。
  3. 使用黑客解决方案,如在vee-验证/ injectWithSelf中。即使如此,可组合的签名将是useLocalization(props?: IProps),我的根组件必须是第一个用道具调用此函数的组件。
  4. 使用像createInjectionState这样的助手,但问题与2相同。

有什么最好的办法解决这个问题吗?不依赖于组件状态(如useMouse )的可组合性很好,但是(全局)可配置的可组合性导致了上述问题:(

EN

回答 1

Stack Overflow用户

发布于 2022-08-03 01:58:40

在这种情况下,与其使用道具,不如使用提供/注入。

这是推荐信。https://vuejs.org/guide/components/provide-inject.html

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73121991

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档