从 Vuex 调用 Mixin 全局方法

alx*_*lxb 5 vue.js vuex vuejs2

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

import Vue from 'vue'
import axios from 'axios';
    
Vue.mixin({
    methods: {
        request(url, datas) {

        //Call axios and return premise
        [...]
    }
});
Run Code Online (Sandbox Code Playgroud)

我有一家这样的商店:

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
})
Run Code Online (Sandbox Code Playgroud)

我想使用 request 来调用 axios 但我有这个错误:

挂载钩子错误:“类型错误:无法读取未定义的属性‘请求’”类型错误:无法读取未定义的属性‘请求’

And*_*pov 9

Mixins,如文档所述,用于组件。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
Run Code Online (Sandbox Code Playgroud)

  • 那么如何在 store.js 中获取 mixin 呢? (2认同)

小智 9

由于请求方法在mixin的方法obj中

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

// access mixin method
mixin.methods.request()
Run Code Online (Sandbox Code Playgroud)