问题描述
我正在尝试使用 wordpress 作为我的后端、WPGraphQL 和 Apollo-Vue 以及我的前端使用 Vue 来构建一个网站。到目前为止一切顺利，但阿波罗让我很伤心。我选择了 Vue3，因为它似乎是库的未来，我想学习最新的而不是过时的，并利用 3 中的新功能和改进。
我听说很多库和包仍然与 Vue 3 不兼容并且容易出错……一些论坛帖子在说 apollo-vue 与 Vue3 不兼容，但我也是 Vue 系统的新手而且完全有可能我也可能只是编码错误......我不确定......这是我的代码......请告诉我我做错了什么，这样我就可以停止拉扯我的头发......>
浏览器控制台错误
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Object(...) is not a function
at setup (HeaderPrimary.vue?da5e:26)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542)
at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
at processComponent (runtime-core.esm-bundler.js?5c40:4182)
at patch (runtime-core.esm-bundler.js?5c40:3791)
at mountChildren (runtime-core.esm-bundler.js?5c40:3975)
at mountElement (runtime-core.esm-bundler.js?5c40:3896)
at processElement (runtime-core.esm-bundler.js?5c40:3868)
setup @ HeaderPrimary.vue?da5e:26
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:6542
setupComponent @ runtime-core.esm-bundler.js?5c40:6503
mountComponent @ runtime-core.esm-bundler.js?5c40:4206
processComponent @ runtime-core.esm-bundler.js?5c40:4182
patch @ runtime-core.esm-bundler.js?5c40:3791
mountChildren @ runtime-core.esm-bundler.js?5c40:3975
mountElement @ runtime-core.esm-bundler.js?5c40:3896
processElement @ runtime-core.esm-bundler.js?5c40:3868
patch @ runtime-core.esm-bundler.js?5c40:3788
componentEffect @ runtime-core.esm-bundler.js?5c40:4298
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4263
mountComponent @ runtime-core.esm-bundler.js?5c40:4222
processComponent @ runtime-core.esm-bundler.js?5c40:4182
patch @ runtime-core.esm-bundler.js?5c40:3791
render @ runtime-core.esm-bundler.js?5c40:4883
mount @ runtime-core.esm-bundler.js?5c40:3077
app.mount @ runtime-dom.esm-bundler.js?830f:1259
eval @ main.js?56d7:41
./src/main.js @ app.js:1557
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1582
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueCompositionAPI from 'vue'
// import { DefaultApolloClient } from 'vue'
import { ApolloClient,createHttpLink,InMemoryCache } from 'vue'
// HTTP connection to the API
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: 'http://localhost/websitename/graphql',})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,cache,})
createApp(App)
.use(router)
.use(VueCompositionAPI)
.use(apolloClient)
.mount('#app')
HeaderPrimary
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueCompositionAPI from 'vue'
import { DefaultApolloClient } from 'vue'
createApp(App)
.use(router)
.use(VueCompositionAPI) //DO I need to do this? How do I access it in a component.. I'm not clear on how this works..
.use(DefaultApolloClient) // same question..
.mount('#app')
<template>
<header>
<nav id="nav_primary">
<Loading_Spinner v-if="loading" />
<ul>
<li v-for="item in menu_items" :key="item">
<router-link :to="{ path: '/'+item.ID } ">{{ item.title }}</router-link>
</li>
</ul>
</nav>
</header>
</template>
<script>
import Loading_Spinner from './Loading_Spinner.vue'
import { watch,useQuery,gql } from 'vue'
//const { ref,reactive } = VueCompositionAPI //I don't kNow what this is? I found it somewhere...
export default {
name: 'HeaderPrimary', setup () {
const {result} = useQuery(gql`
query getMenu {
posts {
edges {
node {
id
title
}
}
}
}
`)
watch(() => {
console.log(result.value)
})
}, data() {
return {
loading: false, menu_items: [], }
}, components: {
Loading_Spinner
}
}
package.json
{
"name": "websitename", "version": "0.1.0", "private": true, "scripts": {
"serve": "vue-cli-service serve --dest ./", "build": "vue-cli-service build", "lint": "vue-cli-service lint"
}, "dependencies": {
"@apollo/client": "^3.3.19", "@vue/apollo-composable": "^4.0.0-alpha.12", "apollo": "^2.29.0-alpha.0", "core-js": "^3.6.5", "graphql": "^15.5.0", "graphql-tag": "^2.12.4", "vue": "^3.0.0", "vue-apollo": "^3.0.0-alpha.3", "vue-ionicons": "^3.0.5", "vue-router": "^4.0.8"
}, "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "node-sass": "^6.0.0", "sass": "^1.32.13", "sass-loader": "^10.2.0", "vue-cli-plugin-apollo": "~0.22.2", "vue-loader": "^16.2.0", "vue-template-compiler": "^2.6.12", "webpack": "^4.42.0"
}, "eslintConfig": {
"root": true, "env": {
"node": true
}, "extends": [
"plugin:vue/vue3-essential", "eslint:recommended"
], "parserOptions": {
"parser": "babel-eslint"
}, "rules": {}
}, "browserslist": [
"> 1%", "last 2 versions", "not dead"
]
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）