Vuejs2 来自Vuex的阿波罗请求

谁能告诉我从哪里可以导入apollo客户端，这样我就可以向apollo发出请求？ 我通常会收到一个错误，或者mutate不是一个函数（即使我从Vue组件传入

this.$apollo

）

我只是想进入Vue的生活。如果有任何关于代码和结构的提示，我将不胜感激

符号成分

登录
从“vuex”导入{createNamespacedHelpers}；
const{mapActions}=createNamespacedHelpers（“auth”）；
导出默认值{
数据（）{
返回{
表格输入：{
电子邮件：空，
密码：null
}
};
},
方法：{
//Vuex操作
…映射操作（[“登录]），
签名用户：函数（）{
//eslint禁用下一行无未使用的变量
this.sign（this.formInput，this.$apollo）。然后（=>
此。$route.push（“/”）
);
}
}
};

Vuex.auth

从“vue cli插件apollo/graphql客户端”导入{apolloClient}；
从“@/graphql/signIn.gql”导入SignInGQL；
导出默认值{
名称空间：对，
声明：{
令牌：null，
用户：{}，
身份验证状态：false
},
吸气剂：{
isAuthenticated:state=>！！state.token，
authStatus:state=>state.authStatus，
用户：state=>state.user
},
行动：{
异步登录（{commit，dispatch}，formInput）{
console.log（'here'）；
试一试{
const{data}=等待阿波罗变异({
突变：SignInGQL，
变量：{…formInput}
})
const{token}=data.signIn；
console.log（令牌）；
提交（'setToken'，令牌）；
setItem（'auth-token'，token）；
分派（'setUser'，令牌）；
}捕获（e）{
控制台错误（e）
}
},
setUser（{commit}，令牌）{
const encodedPayload=token.split（'.'）[1]；
const{payload}=JSON.parse（atob（encodedPayload））；
log（'payload:'，payload）；
//TODO:设置用户信息
提交（'signInUser'，有效载荷）；
}
},
突变：{
setToken（状态，标记）{
state.token=token
},
签名用户（状态、用户）{
state.authStatus=true
state.user={…user}
},
//注销用户（状态）{
//state.authStatus=“”
//state.token=''&&localStorage.removietem（'auth-token'））
// }
}
}

我就是这样做的，以防有人在寻找相同的答案：

从“Vue”导入Vue
从“vue apollo”导入VueAppollo
从“vue cli插件apollo/graphql客户端”导入{CreateAppolloClient}
//安装vue插件
Vue.use（VueAppollo）
//本地存储项的名称
const AUTH_TOKEN='AUTH TOKEN'
//Http端点
const httpEndpoint=process.env.VUE_APP_GRAPHQL_HTTP|http://localhost:3000/graphql';
//配置
const defaultOptions={
//您可以使用“https”进行安全连接（推荐在生产中使用）
httpEndpoint，
//您可以使用“wss”进行安全连接（建议在生产中使用）
//使用“null”禁用订阅
wsEndpoint:process.env.VUE_APP_GRAPHQL_WS|null，
//wsEndpoint:process.env.VUE_APP_GRAPHQL_WS| |'WS://localhost:3000/GRAPHQL'，
//本地存储令牌
令牌名称：AUTH_令牌，
//使用Apollo引擎启用自动查询持久化
坚持:错,，
//对所有内容使用WebSocket（无HTTP）
//您需要传递一个“wsEndpoint”才能使其工作
WebSocketOnly:错，
//是否正在服务器上呈现？
ssr：错，
//覆盖默认阿波罗链路
//注意：不要在此处重写httpLink，请在中指定httpLink选项
//defaultOptions的httpLinkOptions属性。
//httpLinkOptions：{
//标题：{
//授权：authHeader
//   }
// }
//覆盖默认缓存
//缓存：myCache
//覆盖设置授权标头的方式
//getAuth：（tokenName）=>getUserToken（），
//其他客户端选项
//阿波罗：{…}
//客户端本地数据（参见阿波罗链路状态）
//客户端状态：{解析程序：{…}，默认值：{…}
}
export const{apolloClient，wsClient}=createApolloClient({
…默认选项，
//…选项，
})
//在Vue应用程序文件中调用此选项
导出函数createProvider（）{
//创建apollo客户端
apolloClient.wsClient=wsClient
//创建vue apollo提供程序
const apolloProvider=新的VueAppollo({
defaultClient:Apollo客户端，
默认选项：{
$query:{
fetchPolicy:“缓存和网络”，
},
},
errorHandler（错误）{
//eslint禁用下一行无控制台
console.log（“%cError”，“背景：红色；颜色：白色；填充：2px4px；边框半径：3px；字体重量：粗体；”，错误消息）
},
})
返回提供程序
}

如果您有任何建议，请随意留下

从“阿波罗链接上下文”导入{setContext}；
从“apollo boost”导入{apollo客户端，InMemoryCache，HttpLink}；
从“vue apollo”导入VueAppollo；
Vue.use（VueAppollo）；
const httpLink=新的httpLink({
uri:“http://sebapi.com/graphql"
});
const authLink=setContext（（{headers}）=>{
//从ApplicationSettings获取身份验证令牌（如果存在）
const token=ApplicationSettings.getString（“token”）；
//将标题返回到上下文，以便HTTP链接可以读取它们
返回{
标题：{
…标题，
授权：令牌？`Bearer${token}`:空
}
};
});
//更新apollo客户端，如下所示
const Apollo客户端=新Apollo客户端({
链接：authLink.concat（httpLink），
缓存：新的InMemoryCache（）
});
const apolloProvider=新的VueAppollo({
defaultClient:Apollo客户端
});

和LOGIN.VUE

导出默认值{
数据（）{