如何在组件中使用Vue mixin方法

问题描述

我正在尝试在 Vue.js v2.x 中创建一个 mixin，但是每次我调用它的一个方法时，控制台都会显示一个错误：

类型错误：mixins_settings_js__WEBPACK_IMPORTED_MODULE_3_.default.loadSettings 不是函数 在 eval (Login.vue?7463:102)

/src/mixins/setting.js

import vuex from "@/plugins/vuex.js"
import menu from "@/settings/menu.json";

export default {
  methods: {
    _traverse(jsonObj) {...},loadSettings() {
      this._traverse(menu);
      ...
    }
  }
}

/src/components/Login.vue

...
import settings from "@/mixins/settings.js"

export default {
  mixins: [settings],data() {
    return {...};
  },methods: {
    onSubmit() {
      ...
      settings.loadSettings();
    }
  }
}

我哪里错了？

解决方法

使用与本地定义属性相同的语法访问 mixin 的属性。换句话说，使用 this 而不是 mixin 对象：

methods: {
  onSubmit() {
    this.loadSettings();
  }
}