Vux: toast和alert的show都是twoWay,当使用vuex单向数据流时一直报warn

创建于 2016-05-03  ·  12评论  ·  资料来源: airyland/vux

Version

"vux": "0.0.106"

Android or iOS, which browser?

All

Your Codes

<toast :show="toast.show">{{toast.msg}}</toast>

Expected behavior and actual behavior.

因为用作全局的组件,其子component直接使用vuex单向数据流来触发弹出,但是toast及alert的show都是twoWay所以一直报warn,强迫症看得难受

Steps to reproduce the problem

最有用的评论

vuex+vux组合,在使用Popup组件时候也遇到了twoWay绑定的warn。一开始我也想着改变的时候就监听事件吧!后来我在这里找到一个新的解决方案计算属性

下面是一个简单的示例

<template>
  <popup :show.sync="showed">
    <group>
      <switch title="just switch" :value.sync="showed"></switch>
    </group>
   </popup>
</template>

<script>
export default {
  vuex: {
    getters: {
      getShow
    },
    actions: {
      updateShow
    }
  },
  computed: {
    showed: {
      get: function () {
        return this.getShow
      },
      set: function (val) {
        this.updateShow(val)
      }
    }
  }
}
</script>

相比较监听事件而言,多了一层计算属性封装,但是也告别了warn

所有12条评论

那么你的建议是?twoWay是因为组件内部操作会改变show,不这样就状态不正常了。

twoWay只是校验一下是否双向绑定,现在就是校验时报warn

所以我建议取消双向绑定校验,但是你内部还是自动改变show的值,这样如果外部使用双向时也能自动改变值了。

当然,我这里是外部自行控制show的值的

你觉得呢?

不只是校验作用吧?

当然只是校验咯!

你可以不写twoWay,但是在组件中还是sync去绑定,依然能双向

刚转VUE一个月道行不深,望指教😄

应该只是组件绑定的校验作用。假如Alert的show你不用双向绑定,那么你只能通过on-hide事件来改变show的值咯。

是的,alert本来就有,Toast我自行设置setTimeout去改变绑定的show,当然有on-hide是最好的了

toast 和 alert 我也觉得跟vuex不很搭,能有on-hide事件最好,与alert等保持一样的接口。

@JianleiZhang将在下一个版本中实施。

vuex+vux组合,在使用Popup组件时候也遇到了twoWay绑定的warn。一开始我也想着改变的时候就监听事件吧!后来我在这里找到一个新的解决方案计算属性

下面是一个简单的示例

<template>
  <popup :show.sync="showed">
    <group>
      <switch title="just switch" :value.sync="showed"></switch>
    </group>
   </popup>
</template>

<script>
export default {
  vuex: {
    getters: {
      getShow
    },
    actions: {
      updateShow
    }
  },
  computed: {
    showed: {
      get: function () {
        return this.getShow
      },
      set: function (val) {
        this.updateShow(val)
      }
    }
  }
}
</script>

相比较监听事件而言,多了一层计算属性封装,但是也告别了warn

@pzxbc 太棒了:笑脸:

@pzxbc 我发现dispatch某个mutation去修改getshow的值,然后计算属性showed会将值传递给popup组件的内部show值去改变组件状态。上述是我需要的,但是我发现接下来计算属性showed会去调用set绑定的函数this.updateShow,因为我用console.log发现mutaion调用了两次。

我的处理方法是:

      set: function (val) {
        if (val === false){
          this.updateAlert(val)
        }
      }
此页面是否有帮助?
0 / 5 - 0 等级

相关问题

hao-li picture hao-li  ·  3评论

ty850454 picture ty850454  ·  3评论

varHarrie picture varHarrie  ·  4评论

prettybot picture prettybot  ·  3评论

iqiuye picture iqiuye  ·  4评论