Обновление отключенного состояния динамических компонентов на основе значения состояния Vuex

Question

Я понятия не имею, правильно ли я делаю, но вот упрощенная версия того, что я пытаюсь сделать:

Я хочу иметь 3 файловых ввода, с 2-м и 3-м отключенными, пока на 1-м не будет выбран файл.

Я пытался установить для переменной состояния Vuex значение, выбранное для первого входного файла, но после этого два других входа не обновляют свое отключенное состояние.

У меня есть несколько файловых входов, которые создаются динамически, например:

Vue.component('file-input', {
    props: ['items'],
    template: `<div><input type="file" v-on:change="fileSelect(item)" v-bind:id="item.id" v-bind:disabled="disabledState"></div>`,
    methods: {
        fileSelect: function(item) {
            store.commit('fileSelect', file);
        }
    },
    computed: {
        disabledState: function (item) {
            return {
                disabled: item.dependsOn && store.getters.getStateValue(item.dependsOn)
            }
        }
    }
}

Данные для компонента взяты из экземпляра:

var vm = new Vue({
    data: {
        items: [
            { text: "One", id: "selectOne" },
            { text: "Two", id: "selectTwo", dependsOn: "fileOne" },
            { text: "Three", id: "selectThree", dependsOn: "fileOne" }
    }
});

Теперь, обратите внимание на "зависимость от". В магазине Vuex у меня есть соответствующий элемент состояния:

const store = new Vuex.Store({
    state: {
        files: [
            {
                fileOne: null
            }
        ]
    },
    mutations: {
        fileSelect(state, file) {
            state.files.fileOne = file;
        }
    },
    getters: {
        getStateValue: (state) => (stateObject) => {
            return state.files.findIndex(x => x[stateObject] === null) === 0 ? true : false;
        }
    }
});

Теперь вышесказанное работает, когда все сначала инициализируется. Но как только на первом входе что-то выбрано, два других входа не меняются.

Я не уверен, как обновлять привязки, когда происходит изменение состояния.

Answer 1

Ну, я понял это ...

Поскольку мой объект состояния - это массив объектов, я не могу просто изменить одно из значений свойства с помощью state.files.fileOne.Мне нужно было сделать state.files[0].fileOne.

Answer 2

Я думаю, вам нужно реорганизовать свою мутацию, чтобы сделать свойство состояния изменчивым, например:

fileSelect(state, file) {
  Vue.set(state.files[0].fileOne, file);
}