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

Posted 2023-03-08

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

【英文标题】：[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'mutate' of undefined"[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'mutate'”

【发布时间】：2020-10-19 04:46:54

【问题描述】：

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

【问题讨论】：

在handleSignUp中，signUp从何而来？

我从文件中导入它。我错误地粘贴了错误的文件（signIn，而不是 SignUp）。我使用正确的文件和代码进行了编辑。

Fwiw，我在尝试登录时也得到了相同的未定义方法。似乎 apollo 在整个 vue 应用程序中都是未定义的。

对，所以失败的唯一原因是 this.$apollo 在您的组件中是 undefined。到目前为止一切看起来都还不错。您是否尝试过查看 Vue Apollo 问题列表？

我已经浏览过了，但什么也没看到。我尝试重命名常量，即其他人在线程中指出的默认导出。没有骰子。 this.$apollo 在 console.log 上对我来说是未定义的

【参考方案1】：

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

【讨论】：

这很奇怪。很高兴你让它工作了