vue.js - [Vue 警告]:v-on 处理程序中的错误:“TypeError:无法读取未定义的属性 'mutate'”
问题描述
尝试进行 Vue-Apollo/GraphQL 突变查询时,我收到“[Vue warn]: Error in v-on handler:”TypeError: Cannot read property 'mutate' of undefined”的错误。方法是:
...mapMutations(['signIn']),
handleSignUp() {
signUp({
apollo: this.$apollo,
...this.form,
}).then(response => _get(response, 'data.registerUser', {}))
.then(response => {
if(response.success) {
const user = response.user;
this.signIn(user); // using the Vuex store
localStorage.setItem(AUTH_TOKEN_KEY, user.authenticationToken);
this.$router.push({ name: 'home' });
} else {
this.errors = this.errorMessages(response.data.registerUser.errors);
}
}).catch(error => {
this.errors = [error];
});
}
registerUser 方法通过以下方式导入:
import gql from 'graphql-tag'
const mutation = gql`
mutation registerUser(
$email: String!,
$password: String!,
) {
registerUser(input: {
email: $email,
password: $password,
}) {
user {
id
email
authenticationToken
}
success
errors
}
}
`;
export default function signUp({
apollo,
email,
password,
}) {
return apollo.mutate({
mutation,
variables: {
email,
password,
},
});
}
我的 apolloProvider 文件是:
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { AUTH_TOKEN_KEY } from './appConstants';
Vue.use(VueApollo);
const host = window.location.origin;
const httpLink = createHttpLink({ uri: `${host}/graphql` });
const authLink = setContext((_, { headers }) => {
// get the csrfToken from the element in appilcation.html layout
const csrfToken = document.
querySelector('meta[name="csrf-token"]').
attributes.content.value;
// get the authentication token from local storage if it exists
const authToken = localStorage.getItem(AUTH_TOKEN_KEY);
return {
headers: {
...headers,
'X-CSRF-Token': csrfToken,
authorization: authToken ? `Bearer ${authToken}` : '',
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
const apolloProvider = new VueApollo({ defaultClient: client });
export default apolloProvider;
我的 Vue 包是:
import Vue from 'vue/dist/vue.esm'
import LandingApp from '../components/landing/LandingApp.vue'
import apolloProvider from './configuration/apolloProvider'
import Vuex from 'vuex'
import createStore from 'store/baseStore.js'
Vue.use(Vuex)
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: '#landing',
apolloProvider,
store: createStore(),
components: { LandingApp }
})
})
阿波罗似乎没有启动。它无法在 undefined 上调用 mutate。不知道我在这里缺少什么。
编辑:我正在关注本指南 - https://technology.doximity.com/articles/token-authentication-with-rails-vue-graphql-and-devise
解决方案
将 apolloProvider 文件中的所有代码移到我的 Vue 包中修复了未定义的问题。不知道为什么,但至少现在它正在触及后端。
推荐阅读
- azure-table-storage - 我在哪里可以找到存储表功能的实际实现?
- wordpress - 在域的子目录下托管两个不同的应用程序
- css - 减小屏幕尺寸时我的列重叠
- php - Laravel - 基于模型属性的 hasOne 关系
- c - 使用文件指针执行 C hangman 程序时出现分段错误
- python - 如何在python中管理并行目录中的导入
- python - 如何在具有条件的切片中的二维 Numpy 数组中的轴上应用累积总和到先前的值?
- haskell - JavaScript 中分组运算符 `()` 的功能是否与 Haskell 或其他编程语言不同?
- javascript - 如何将 javascript 文件链接到 express SPA 中的多个 html 文件之一?
- for-loop - 从 .txt 中获取多个字符串,然后一起输出