Vuex에서 Mixin 글로벌 메서드 호출

Vuex에서 Mixin 글로벌 메서드 호출

다음과 같이 악시스를 호출하고 오류를 처리하는 요청 메서드가 있습니다.

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
})

요청을 사용하여 Axi를 호출하고 싶은데 다음 오류가 있습니다.

마운트된 후크의 오류: "TypeError: 정의되지 않은 속성 '요청'을 읽을 수 없습니다." TypeError: 정의되지 않은 속성 '요청'을 읽을 수 없습니다.

문서에서 설명한 바와 같이 컴포넌트에는 믹스인이 사용됩니다.Vuex는 컴포넌트 자체가 아닙니다.새로운 Import/export 작업 방식을 사용하고 있는 것을 알 수 있으므로 혼합 기능을 내보내기 쉬운 기능으로 합니다.그런 다음 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

요청 방식은 mixin의 메서드에 있기 때문에 obj

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

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

솔루션:

//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)
  }
}

언급URL : https://stackoverflow.com/questions/52615997/call-mixin-global-method-from-vuex