Laravel 如何正确使用Vue mixin

几天以来，我一直在使用VueJS（作为Laravel的一部分），我希望重用代码，例如进行API调用。我在Google上发现“mixin”是一个不错的选择，因为它不能使用原生ES6类。我熟悉javascript mixin，但无法让它以Vue的方式工作

我在谷歌上找到了多个实现，并尝试了它们，但我无法让它工作。也许我理解错了

app.js

...
import appSettingStore from "./stores/appSettingStore";
...
export const eventBus = new Vue();
const app = new Vue({
    el: '#app',
    appSettingStore,
    // apiHelper,
    // data() {
    //     return {
    //         data: {
    //             testData: "",
    //             store: appSettingStore,
    //         }
    //     }
    // },
});
...

appSettingStore.js

import Vue from 'vue';
import Vuex from 'vuex';
import apiHelper from '../apiHelper';   // tried with and without this line
Vue.use(Vuex);
...
const appSettingStore = new Vuex.Store({
    mixins: [apiHelper],   
    state: {
        accounts: [],
    },
    mutations: {
        setAccounts(state, accounts) {
            // some mutation logic
        }
    },
    actions: {
        getAccounts({commit}) {
            // Here i want to call the mixin method, tried something like:
            // this.getRequest(x,y,z);
            // apiHelper.getRequest(x,y,z);
            // getRequest(x,y,z);
        }
    }
});

export default appSettingStore;

apiHelper.js

const apiHelper = Vue.mixin({
    methods: {
        getRequest(url, headers, body) {
            let subDomain = window.location.host.split('.')[0];
            let baseUrl = `http://${subDomain}.festipay.xlan/api/v1`;
            let header = {headers: {'Content-Type': 'application/json'}}

            axios.get(baseUrl + "url", header)
                .then(function (response) {
                    return response.data.data;
                })
                .catch(function (error) {
                    return error;
                });
        }
    }
});
export default apiHelper;

操作

getAccounts

是从另一个vue组件en（使用console.log（）测试）中“调用”的

我在devtools控制台中遇到的错误是挂载钩子中的

错误：“TypeError:this.getRequest不是函数”

如何解决此错误/问题？

---

当我需要更多信息时，请告诉我，我会更新我的帖子。

仅针对那些想要实现同样目标的人，举一个我是如何做到这一点的例子。我在Laravel6应用程序中使用了这种方法，因此我不确定它是否适用于其他项目/框架或独立

我的api助手：

let apiHelper = {
  getRequest(url, callback) {
    console.log ("you hit the apiHelper getRequest function")
    let baseUrl = `http://${subDomain}.festipay.xlan/api/v1`;
    let header = {headers: {'Content-Type': 'application/json'}}


    axios.get(baseUrl + url, header)
      .then(function (response) {
        callback(response.data.data);
      })
      .catch(function (error) {
        // do something with the error...
      });
  },
}
export default apiHelper;

我的vuex存储组件的（剥离）副本：

import Vue from 'vue';
import Vuex from 'vuex';
import apiHelper from '../apiHelper';   // import the helper class here

Vue.use(Vuex);

const appSettingStore = new Vuex.Store({
    state: {
        accounts: [],
    },
    mutations: {
        setAccounts(state, accounts) {
            state.accounts = accounts;
        }
    },
    actions: {
        getAccounts({commit}) {
            apiHelper.getRequest("/app_settings", (data) => {commit('setAccounts', data)});      // just call the method like this, note that you need to use a callback function to receive the result!
          });
        },
    }
});

export default appSettingStore;

---

对于那些想达到同样目标的人，我举了一个例子。我在Laravel6应用程序中使用了这种方法，因此我不确定它是否适用于其他项目/框架或独立

我的api助手：

let apiHelper = {
  getRequest(url, callback) {
    console.log ("you hit the apiHelper getRequest function")
    let baseUrl = `http://${subDomain}.festipay.xlan/api/v1`;
    let header = {headers: {'Content-Type': 'application/json'}}


    axios.get(baseUrl + url, header)
      .then(function (response) {
        callback(response.data.data);
      })
      .catch(function (error) {
        // do something with the error...
      });
  },
}
export default apiHelper;

我的vuex存储组件的（剥离）副本：

import Vue from 'vue';
import Vuex from 'vuex';
import apiHelper from '../apiHelper';   // import the helper class here

Vue.use(Vuex);

const appSettingStore = new Vuex.Store({
    state: {
        accounts: [],
    },
    mutations: {
        setAccounts(state, accounts) {
            state.accounts = accounts;
        }
    },
    actions: {
        getAccounts({commit}) {
            apiHelper.getRequest("/app_settings", (data) => {commit('setAccounts', data)});      // just call the method like this, note that you need to use a callback function to receive the result!
          });
        },
    }
});

export default appSettingStore;

---

您是否尝试删除mixin的声明并使用常规JavaScript方法？例如，我现在可以调用mixin的函数，而不是：const-apiHelper=Vue.mixin（{Use:const-apiHelper=（）=>{…谢谢，我现在可以调用mixin的函数了。我按照您的建议将其更改为常规JS方法，删除了

getRequest

周围的

方法：{}

标记，并更改了添加

mixin:[]的位置

.Console.log向我显示该方法已执行，但如果它在mixin JS方法中，则

comit

函数不起作用。我认为这是因为该方法现在在Vue生态系统之外（因为它不是Vue类）。很好，我很高兴它现在可以工作了。：）您尝试过删除mixin的声明并使用常规JavaScript方法吗？例如，不是：const apiHelper=Vue.mixin（{use:const apiHelper=（）=>{…谢谢，我现在可以调用mixin的函数了。我按照您的建议将其更改为常规JS方法，而是删除了

方法：{}

标记位于

getRequest

周围，并更改了添加

mixins:[]

的位置。Console.log显示该方法已执行，但如果

comit

函数位于mixinjs方法内，则该函数不起作用。我认为这是因为该方法现在位于Vue生态系统之外（因为它不是Vue类）很好，我很高兴它现在起作用了。：）