根據Vuex狀態值更新動態組件禁用狀態

Question

我不知道我正在做的事情是否正確，但這是我正在嘗試做的簡化版本：

我希望有3個文件輸入，第二個和第三個被禁用，直到第一個選擇了一個文件。

我試圖將Vuex狀態變量設置為選擇的第一個文件輸入，但是在執行此操作時，其他2個輸入不會更新其禁用狀態。

我有一些動態創建的文件輸入，如下所示：

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

現在，請注意“dependsOn”。 在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屬性可變，如下所示：

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

Answer 2

好吧，我想通了......

因為我的狀態對象是一個對象數組，所以我不能只用state.files.fileOne改變一個屬性的值。 我需要做state.files[0].fileOne 。