Question

我的状态与另一个状态相互依赖，如下所示：https://jsfiddle.net/MagicMagnate/1zufrspx/

const store = new Vuex.Store({
state: {
    checkedNames: ['Jack', 'Mike'],
    interlockedState : 'foo'

},
mutations: {
    updateChecked(state, payload) {
        state.checkedNames = payload
        state.interlockedState = 'bar' //trying to set the state but failed
    }
},
actions: {
    updateChecked({
        commit
    }, payload) {
        commit('updateChecked', payload)
    }
}
})

new Vue({
    store,
    el: '#example',
    //data: {interlockedState:'foo'},
    computed: {
        checkedNames: {
            get() {
                return this.$store.state.checkedNames
            },
            set(str) {
                this.$store.dispatch('updateChecked', str)
            }
        }
    }
})

只有更复杂的案例，否则，我知道我不应该直接从状态直接变异，但是我已经知道如何为状态分配一个新的值来改变状态，所以这两个状态没有相互联系。

Answer 1

您忘记为interlockedState设置计算值。

computed: {
  //...
  interlockedState(state) {
    return state.interlockedState
  }
}

这是更新的jsfiddle

Vuex与另一个互锁状态

1 个答案: