Vuex에서 개체를 올바르게 혼합하고 격리하는 방법

Vuex에서 개체를 올바르게 혼합하고 격리하는 방법

모듈을 사용하여 Vuex용 믹스인을 만들려고 하지만 모듈 내에서 작업이 혼합되고 있습니다.

다음은 SubEvents 모듈입니다.

import Form from '../../classes/Form'

import * as mutationsMixin from './mixins/mutations.js'
import * as actionsMixin from './mixins/actions.js'
import * as statesMixin from './mixins/states.js'

const state = merge_objects(statesMixin.common, {
    data: {},

    event: null,

    form: new Form({
        name: null,
    }),
})

const actions = merge_objects(actionsMixin, {
    select() {
        dd('subevent select')
    },
})

const mutations = merge_objects(mutationsMixin, {
    mutateSetEvent(state, payload) {
        state.event = payload
    },
})

dd('subEvents')

export default {
    state,
    actions,
    mutations,
}

여기는 가게입니다

/**
 * Imports
 */
import Vue from 'vue'
import Vuex from 'vuex'

/**
 * Vuex
 */
Vue.use(Vuex)

/**
 * Global state
 */
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

/**
 * Modules
 */
import gate from './modules/gate'
import events from './modules/events'
import subEvents from './modules/subEvents'
import categories from './modules/categories'
import people from './modules/people'
import roles from './modules/roles'
import institutions from './modules/institutions'
import environment from './modules/environment'

/**
 * State
 */
const state = {
    mounted: false,
}

/**
 * Store
 */
let store = new Vuex.Store({
    state,
    actions,
    getters,
    mutations,
    modules: {
        events,
        people,
        categories,
        environment,
        subEvents,
        gate,
        roles,
        institutions,
    },
})

store.dispatch('environment/absorbLaravel')

export default store

merge_object 도우미입니다.

window.merge_objects = (target, ...sources) => {
    return Object.assign(target, ...sources)
}

따라서 스토어 가져오기를 보면 이벤트 후에 subEvents가 로드되고 위의 subEvents 저장소에서 작업 select()(원래 mixin에서 전송됨)가 오버로드되고 있지만 오버로드되지 않은 events/select()를 호출하면 콘솔에 'subevent select(d()' 메시지가 표시됩니다.

이것은 그것을 조금 설명하는 이미지입니다.

문제는 복사본을 만들지 않고 첫 번째 인수로 전달하는 개체를 수정한다는 것입니다.함수는 첫 번째 개체를 반환합니다.

const a = {};
Object.assign(a, { a: 1 });
console.log(a); // { a: 1 }

당신의 경우, 저는 당신이 당신의 객체의 딥 클론이 필요하다고 생각하지 않습니다.혼합물을 직접 수정하지 않으려는 경우입니다.전화하시면Object.assign첫 번째 인수로 새로 생성된 개체를 사용하여 다음 인수에 있는 모든 개체의 얕은 복사를 수행합니다.

Object.assign({}, target, ...sources)

const a = {};
Object.assign({}, a, { a: 1 });
console.log(a); // {}

개체에 인스턴스 간에 공유하지 않으려는 중첩된 개체가 있기 때문에 딥 클론이 필요한 경우와 같은 것을 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/52906783/how-to-correctly-mix-and-isolate-objects-in-vuex