Vuex interlocking state with another

Question

My state is inter-dependent with another, something like this: 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)
            }
        }
    }
})

Only more complex with case and if else, I know I shouldn't mutate directly from state directly, but I'm running out idea on how to assign a new value to state to mutate so those two states aren't interlocked with each other.

Answer 1

You forgot to set a computed value for interlockedState.

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

Here is an updated jsfiddle