Vuex - 모듈 간에 공통 기능 공유

Vuex - 모듈 간에 공통 기능 공유

저는 Vue Js 2 어플리케이션에서 작업하고 있으며 현재 코드를 분리하기 위해 스토어와 다른 모듈을 구축하고 있습니다.공통 함수를 작성하여 모든 모듈에서 공유할 수 있는 방법이 있습니까?

예를 들어 customer.js, cart.js, address.js에서 사용할 필요가 있는 truncate() 함수가 있습니다.store.js에서 선언하고 모듈에서 사용하려고 하면 오류가 발생합니다.수출입만이 유일한 방법인가요?기능을 공유하는 가장 좋은 방법은 무엇입니까?

가장 간단한 경우는 당연히 js 파일에 정규 함수를 정의하고 필요한 곳이면 Import/사용하는 것입니다.

Vue 고유의 접근법이 있습니다.

Vuex 모듈의 일반적인 재사용 가능 기능에는 Vuex 플러그인을 사용할 수 있습니다.

아래의 예를 확인해 주세요.루트 스토어에서의 사용에 주의해 주세요.plugins: [myTruncatePlugin].

const myTruncatePlugin = store => {
  store.truncate = function(str) {
    return str.replace(/-/g, '') + ' ...was truncaaaated!'; // example implementation
  }
}

const moduleA = {
  namespaced: true,
  state: {name: "name@moduleA"},
  mutations: { changeName(state, data) { state.name = this.truncate(data); } },
}
const moduleB = {
  namespaced: true,
  state: {title: "title@moduleB"},
  mutations: { changeTitle(state, data) { state.title = this.truncate(data); } },
}
const myStore = new Vuex.Store({
  strict: true,
  modules: {
    aaa: moduleA,
    bbb: moduleB
  },
  plugins: [myTruncatePlugin]  // IMPORTANT: YOU MUST DECLARE IT HERE
});
new Vue({
  store: myStore,
  el: '#app',
  mounted: function() {
    setTimeout(() => {
      this.changeName("-n-e-w-N-A-M-E-");
      this.changeTitle("-n-e-w-T-I-T-L-E-");
    }, 200);
  },
  computed: {
    ...Vuex.mapState('aaa', ['name']),
    ...Vuex.mapState('bbb', ['title'])
  },
  methods: {
    ...Vuex.mapMutations('aaa', ['changeName']),
    ...Vuex.mapMutations('bbb', ['changeTitle'])
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>moduleA's name: {{ name }}</p>
  <p>moduleB's title: {{ title }}</p>
</div>

Vue 인스턴스의 일반적인 재사용 가능 기능에는 Mixin을 사용할 수 있습니다.가장 일반적인 경우 세계적인 Mixin(주의해서 사용)이 있습니다.

Vue.mixin({
  methods: {
    truncate(str) {
      return str.replace(/-/g, '') + ' ...was truncaaaated!'; // example implementation
    }
  }
})

// this.truncate() will be available in all Vue instances...
new Vue({
  el: '#app1',
  data: {myStr1: '-o-n-e-'},
  mounted() { this.myStr1 = this.truncate(this.myStr1); }
})
new Vue({
  el: '#app2',
  data: {myStr2: '-t-w-o-'},
  mounted() { this.myStr2 = this.truncate(this.myStr2); }
})
// ...and components
Vue.component('my-comp', {
template: '#t3',
  data() { return {myStr3: '-t-h-r-e-e-'} },
  mounted() { this.myStr3 = this.truncate(this.myStr3); }
});
new Vue({
  el: '#app3',
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app1">App1: "{{ myStr1 }}"</div>
<div id="app2">App2: "{{ myStr2 }}"</div>

<template id="t3">
  <div>App3's component: "{{ myStr3 }}"</div>
</template>
<div id="app3"><my-comp></my-comp></div>

@acdcjunior는 Mixins를 사용하는 것이 가장 좋지만 Vue 인스턴스에서 메서드를 선언하는 것만으로 다른 옵션을 제공합니다.

그래서 아래 예시는 제가 만들고 있는doTruncateVue 인스턴스의 메서드는 컴포넌트에 의해 호출됩니다.this.$parent.doTruncate

// register
Vue.component('cart-component', {
  template: '<button @click="doTruncate">Cart Truncate!</button>',
  methods: {
  	doTruncate: function() {
    	this.$parent.doTruncate("Hello from cart");
    }
  }
})

// register
Vue.component('customer-component', {
  template: '<button @click="doTruncate">Customer Truncate!</button>',
  methods: {
  	doTruncate: function() {
    	this.$parent.doTruncate("Hello from customer");
    }
  }
})

var app3 = new Vue({
  el: '#app',
  methods: {
  	doTruncate: function(params) {
    	alert(params);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
<div id="app">
<cart-component></cart-component>
<br>
<customer-component></customer-component>
<br>
<button @click="doTruncate('Hello from parent')">
Parent!
</button>
</div>

vue js 이벤트를 사용하여 다음과 같은 기능을 공유할 수 있습니다.

eventBus.js // 공통 인스턴스를 만듭니다.

import Vue from 'vue';
export const eventBus = new Vue();

common.common // 공통 함수가 이 파일에 들어갑니다.

import { eventBus } from '<path of file>'; 

mounted() {
    eventBus.$on('truncate',()=> {
        this.truncate();
    })
}

methods: {
    truncate(){
        //truncate code
    }
}

customer.contract // customer.contract 함수를 호출합니다.

import { eventBus } from '<path of file>'; 
eventBus.$emit('truncate');

언급URL : https://stackoverflow.com/questions/49291360/vuex-sharing-common-functions-across-modules