Question

我有一个像这样的mixin，带有一个请求方法来调用axios并处理错误等。

import Vue from 'vue'
import axios from 'axios';

Vue.mixin({
    methods: {
        request(url, datas) { 

        //Call axios and return premise
        [...]

         }
});

我有一家这样的商店：

const actions = {
  selectEmployees: (store, keywords) => {

    this.request(`/users/list/search{/keywords}`).then(e => {
        store.commit('SELECT_EMPLOYEES', e.data)

    });
  }
}

let store = new Vuex.Store({
  state: state,
  mutations: mutations,
  getters: getters,
  actions: actions
})

我想使用request来调用axios，但是出现此错误：

挂接的钩子中出现错误：“ TypeError：无法读取以下属性的'request' undefined” TypeError：无法读取未定义的属性“ request”

感谢您的帮助。

亚历克斯

Answer 1

如docs所述，

杂类被用作组件。 Vuex本身不是组件。如我所见，您正在使用新的导入/导出方法，只需将您的混合功能简单地导出即可。然后在其他地方将它们作为mixin附加到Vue，或在商店外部使用。大致内容（半代码）：

// mixin.js
export default function request() {}

// main.js
Vue.mixin({
  methods: {
    request: mixin.request // will provide this.request in each component
  }
}

// store.js
mixin.request() // will fire the method

Answer 2

由于request方法在mixin的obj方法中

// store.js 
import mixin from './mixin'

// access mixin method
mixin.methods.request()

Answer 3

我的解决方案：

//GlobalMixin.js
const Mixin = {
  methods: {
    _secureHTML(str) {
      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
  }
}

export { Mixin } //use: import { Mixin } from 'GlobalMixin.js'

// - export it as a Vue Plugin
export default {
  install(Vue, options) {
    Vue.mixin(Mixin)
  }
}

从Vuex调用Mixin全局方法

3 个答案: