Question

几天以来，我一直在使用VueJS（作为Laravel的一部分），我想重用代码，例如进行API调用。我在Google上发现“ Mixins”是必经之路，因为使用本机ES6类绝非易事。我对javascript mixin很熟悉，但无法在Vue方式上运行它。

我在Google上找到了多种实现，并尝试了它们，但我无法使其正常运行。也许我理解错了吗？

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组件“调用”的（已通过console.log（）测试）。

在devtools控制台中出现的错误是Error in mounted hook: "TypeError: this.getRequest is not a function"

如何解决此错误/问题？当我需要更多信息时，请告诉我，我会更新我的帖子。

Answer 1

仅针对想要实现相同目标的人们，我就是这样做的一个例子。我在Laravel 6应用程序中使用了这种方式，所以我不确定它是否可以在其他项目/框架中运行或独立运行。

我的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;

如何正确使用Vue mixins

1 个答案: