Checkbox automatically binds with data and checkbox?

the data in store is not involved in the operation of the page, so why is it affected?
Why are the two items printed in updated always equal?
using chrome"s vue plug-in, you can clearly see in the vuex interface that after triggering printing in updated, the channelsOn in store has not changed. Why has the printed result changed?
the original intention is to use data to temporarily store the data on this page. When you exit the page, compare whether the original data in data and store are equal, and then further operate

.
<label v-for="(channel, index) in channels" :key="index">
    <input type="checkbox" class="canshu-input canshu-checkbox" 
    :checked="status.channelsOn.indexOf(channel.id)>=0"
      @click="checkedOne(channel.id)">
           {{channel.txt}}
</label>

js:

updated(){
  console.log(this.status.channelsOn);
  console.log(this.$store.state.canshu.status.channelsOn);
},
methods: {    //
  checkedOne(eleId) {
    let idIndex = this.status.channelsOn.indexOf(eleId)
    if (idIndex >= 0) {
      this.status.channelsOn.splice(idIndex, 1)
    } else {
      this.status.channelsOn.push(eleId)
    }
  }
},
data() {
  return {
    status: {
      channelsOn: this.$store.state.canshu.status.channelsOn
    },
    channels: [    //
      { id: "1", txt: "1"},
      { id: "2",txt: "2"},
      {id: "3",txt: "3" },
      {id: "4",txt: "4"},
    ]
  }
}

this value is not that value. You just give the value in store to the data, of your component, and then you will only change the value of data.
learn more about the documentation vuex .


the state of the application level should be centralized into a single store object.

submitting the mutation is the only way to change the state, and the process is Synchronize's.

Asynchronous logic should be encapsulated in action.

Menu