checkbox与data和checkbox自动双向绑定?

发布于 2022-09-11 15:30:18 字数 1161 浏览 13 评论 0

在页面操作的过程中并没有涉及到store中的数据,为什么会被影响呢??
为什么在updated中打印的2项总是相等?
使用chrome的vue插件,可以在vuex界面明确看到触发updated中的打印后,store中的channelsOn并未改变,为什么打印出的结果却是已经改变了?
本意是使用data暂存本页数据,退出页面时比对data与store中的原数据是否相等,再进一步操作

<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)'>
           &nbsp;{{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'},
    ]
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

廻憶裏菂餘溫 2022-09-18 15:30:18

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

不羁少年 2022-09-18 15:30:18

此值非彼值,你只是把store里面的值给了你组件的data,后续改变的也只是data的值
了解更多参考一下vuex的文档吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文