问题标签 [vue-composition-api]

我有兴趣深入了解 Vue.js v3，甚至在它发布之前。某处是否有（WIP）API 文档？像这个：

https://vuejs.org/v2/api/

我只能找到一些文章和半官方出版物。尝试了这个存储库，但没有名为dev的分支。

我知道它仍在进行中，但是仍然没有内部保存的文档吗？

由于Vue的组合 api已经移植到当前版本 v2，显然我们可以在新版本发布之前开始使用它。

这些示例通常具有一个新引入的setup()钩子，它单独描述或与基本JS 函数一起描述。

乍一看，我认为它只是一个初始化反应数据的地方，我会问：在什么情况下应该使用它。

但是，当您深入挖掘时，似乎没有它就无法实现组合 API。那么，那个钩子是什么东西，它可以与它之外的data,methods等computed字段一起使用吗？

我想创建一个用TypeScript编写的可重用包装函数，用于通过使用组合函数触发 toast 通知，如 Vue 3.0 的当前规范中所定义：组合 API RFC。

本示例使用 BootstrapVue v2.0 toast 组件。使用 Vue 2，它将通过根上下文中this.$bvToast的Vue 组件实例注入来调用：

这个类似服务的组合函数看起来很像这样：

并且会像这样使用：

虽然Vue Composition API RFC Reference 站点有很多watch模块的高级使用场景，但没有关于如何观看组件道具的示例？

Vue Composition API RFC 的主页或Github 的 vuejs/composition-api 中也没有提到它。

我创建了一个Codesandbox来详细说明这个问题。

编辑：虽然我的问题和代码示例最初是使用 JavaScript，但我实际上使用的是 TypeScript。托尼汤姆的第一个答案虽然有效，但会导致类型错误。Michal Levý的回答解决了这个问题。所以我typescript后来标记了这个问题。

EDIT2<b-form-select> ：这是我在from之上的这个自定义选择组件的反应性布线的抛光但准系统版本bootstrap-vue （否则不可知论实现，但这个底层组件确实会发出 @input 和 @change 事件，这取决于是否以编程方式进行更改或通过用户交互）。

我正在尝试将@vue/apollo-composable与我的 Nuxt-Ts 应用程序一起使用。这是应该如何将其注入“普通”Vue 应用程序的根实例的示例：

问题：我不知道如何访问Nuxt-TS 中的根实例。

我尝试制作一个插件，但它被直接注入到根实例中（这是不对的，因为@vue/apollo-composable使用composition-api::provide()它会创建它自己的属性_provided。

如果我使用 nuxt 插件的inject一个$get 连接。如果我_provided直接通过它写一个对象，ctx.app._provided =它就不会粘住。

我不能provide()像原来的例子那样调用，因为它只允许在VueComponent::setup函数内部。

我还尝试创建一个组件并在我需要它的页面上使用它（虽然有点违背了在根实例中安装的目的）

但是随后setup导出的组件在InstallGraphQl::setup...之前被调用

编辑：有关更多信息，@vue/apollo-composable请参见此处的讨论：https ://github.com/vuejs/vue-apollo/issues/687

我正在尝试通过将道具传递给它并断言它正确呈现它们来测试 jsx 组件。尽管出于我无法理解的原因，这失败了。这是组件

这是失败的单元测试的片段：

失败测试的输出在这里：

一切正常！除了这一部分。如果我使用单个文件组件 ( .vue) 组件安装并且测试通过没有问题。

如何配置vue-apollo, 结合使用or@vue/apollo-composable来完善？@vue/composition-apiVue3.0

因为虽然我apolloClient通过 using获得了默认值@nuxtjs/apollo：

它仍然是空的，而不是填充我的设置nuxt.config.ts。

我怎样才能创建一个工作vue-apollo client使用@vue/apollo-composable或如何context.root.$apollo在第一手创建？

我正在尝试将 Vue 组合 API 与 TypeScript 一起使用，以便对即将发生的更改更加熟悉，但我遇到了一个小而烦人的错误。当我尝试在下面的脚本中使用“ref”实例化键入的值时，我收到“未定义数字”的错误。从我在https://vue-composition-api-rfc.netlify.com/api.html#ref的 Typing 部分可以看到，不过，我做得对。但是，如果我删除任何键入“ref”的尝试，它会隐含地将其键入为数字。这是我第一次尝试使用 TypeScript，所以我可能错了，但是因为我知道 x 将是一个数字，所以我认为我应该明确声明类型而不依赖于隐式类型。我在下面发布我的代码片段。我没有已部署的副本，因为这实际上是我尝试做的第一件事，而且我没想过尝试为这个错误部署它。任何帮助，将不胜感激。

我一直试图了解在 Vue 中使用函数时如何获得反应值。

我有一个像这样的简单案例：

isSelected并且toggleSelect是方法（或者更确切地说是通过 Vue Composition API 公开的函数）。

它们被定义为：

单击复选框时，我看到所有状态都已更新。但是 as:value绑定到一个函数。它不会触发视图的更新。

这基本上是“用参数计算”的问题，我没有找到任何真正的答案。

我试过了，$forceUpdate但也没有运气。

我只是尝试使用 Vuetify 在 Nuxt/Composition API/TypeScript 项目中使用子组件。我尝试在 setup 方法之前包含组件，但是当我查看源代码时，我只看到<!---->子组件数据应该在哪里。

这是应该显示“嵌套”组件的layouts/default.vue布局。

这是要嵌套的components/ListFilter.vue组件的示例内容，其中的内容无关紧要。