[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'mutate'”

Question

在尝试进行 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

Answer 1

将 apolloProvider 文件中的所有代码移到我的 Vue 包中修复了未定义的问题。不知道为什么，但至少现在它正在打到后端。