如何解决Quasar v2 Vue-Apollo 设置
我最近切换到 Quasar v2,但无法获取 vue apollo 设置所需的信息。我正在使用 https://apollo.vuejs.org/guide/installation.html#_1-apollo-client 尝试使用引导文件将 vue apollo 安装到框架中。
这是我的 boot/apollo.ts 文件
import { boot } from 'quasar/wrappers';
import ApolloClient from 'apollo-boost';
import VueApollo from 'vue-apollo';
const apollo = new ApolloClient({
uri: 'https://api.graphcms.com/simple/v1/awesoMetalksClone',});
const apolloProvider = new VueApollo({
defaultClient: apollo,});
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$apollo
app.config.globalProperties.$apollo = apollo;
// ^ ^ ^ this will allow you to use this.$apollo (for Vue Options API form)
// so you won't necessarily have to import apollo in each vue file
});
export { apollo,VueApollo,apolloProvider };
这就是我尝试使用它的地方:
import { Vue } from 'vue-class-component';
export default class LoginPage extends Vue {
public login() {
console.log(this.$apollo);
}
}
我得到的错误是
“LoginPage”类型上不存在属性“$apollo”。
我可以在 globalProperties 的评论中看到它提到了 vue options api。不确定是否发生这种情况,因为我使用的是 vue-class-component。
解决方法
我最终在导出下面添加了这个
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$apollo: FunctionConstructor;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。