Как правильно смешивать и изолировать объекты в Vuex - PullRequest
Новая
       10

Как правильно смешивать и изолировать объекты в Vuex

0 голосов
/ 20 октября 2018

Я пытаюсь создать вид миксина для 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,
}

Этоstore 

/**
 * 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 загружаются после событий, и действие выбирается() (изначально пришедший из mixin) в хранилище subEvents выше перегружается, но когда я вызываю events / select (), который не перегружен, я получаю сообщение «subevent select» в консоли (dd () является помощником длячто)

Это изображение, объясняющее это немного

enter image description here

1 Ответ

0 голосов
/ 21 октября 2018

Проблема в том, что Object.assign не создает копию, а вместо этого изменяет объект, который вы передаете в качестве первого аргумента.Функция вернет первый объект. 

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

Если вам нужен глубокий клон (например, потому что в вашем объекте есть вложенные объекты, которые вы не хотите разделять между экземплярами, я бы рекомендовал использовать что-то вроде lodash.merge.

...