Vux: トーストとアラートショーはどちらも双方向であり、vuexの一方向データフローを使用する場合は常に警告を報告します

作成日 2016年05月03日  ·  12コメント  ·  ソース: airyland/vux

バージョン

"vux": "0.0.106"

AndroidまたはiOS、どちらのブラウザですか?

全て

あなたのコード

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

期待される動作と実際の動作。

グローバルコンポーネントとして使用されるため、そのサブコンポーネントは直接vuex一方向データフローを使用してポップアップをトリガーしますが、トーストとアラートショーは両方とも双方向であるため、警告を報告し続け、強迫性障害は不快です。

問題を再現する手順

最も参考になるコメント

vuex + vuxの組み合わせでも、ポップアップコンポーネントを使用するときにtwoWayにバインドされた警告が発生しました。初めは、変更が加えられたときのイベントも聞きたかったです!後で私はここで新しい解決策を見つけました:計算されたプロパティ

これが簡単な例です

<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>

イベントの監視と比較して、計算属性のカプセル化の追加レイヤーがありますが、警告するために別れを告げます

全てのコメント12件

それで、あなたの提案は何ですか? TwoWayは、コンポーネントの内部操作によってショーが変更されるためです。そうでない場合、ステータスは異常になります。

twoWayは、それが双方向バインディングであるかどうかを確認するだけですが、今は時間警告を確認することです

したがって、双方向バインディングの検証をキャンセルすることをお勧めしますが、showの値は内部で自動的に変更されるため、外部で双方向を使用する場合は、値を自動的に変更できます。

もちろん、私はショーの価値を外部からコントロールするためにここにいます。

どう思いますか?

チェックするだけじゃないですか?

もちろん、チェックしているだけです!

twoWayを記述する必要はありませんが、コンポーネントの同期によってバインドされ、双方向にすることができます。

1か月間VUEに転送したばかりですが、道は深くありません。アドバイスしたいと思います😄

これは、コンポーネントバインディングの単なる検証機能である必要があります。 Alertの表示に双方向バインディングが必要ない場合は、 on-hideイベントを介してのみshowの値を変更できます。

はい、アラートはすでに存在します。トースト、setTimeoutを設定して、バインドされたショーを変更します。もちろん、非表示にすることをお勧めします。

また、トーストとアラートはvuexとあまり互換性がないと思います。非表示のイベントを設定し、アラートと同じインターフェイスを維持することをお勧めします。

@JianleiZhangは次のリリースで実装されます。

vuex + vuxの組み合わせでも、ポップアップコンポーネントを使用するときにtwoWayにバインドされた警告が発生しました。初めは、変更が加えられたときのイベントも聞きたかったです!後で私はここで新しい解決策を見つけました:計算されたプロパティ

これが簡単な例です

<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>

イベントの監視と比較して、計算属性のカプセル化の追加レイヤーがありますが、警告するために別れを告げます

@pzxbcブリリアント:スマイリー:

@pzxbc getshowの値を変更するためにミューテーションをディスパッチし、次に表示される属性を計算すると、その値がポップアップコンポーネントの内部show値に渡され、コンポーネントの状態が変更されることがわかりました。上記が必要ですが、console.logを使用してmutaionが2回呼び出されていることを確認したため、次に示す計算属性は関数this.updateShowをsetにバインドして呼び出すことがわかりました。

私のアプローチは次のとおりです。

      set: function (val) {
        if (val === false){
          this.updateAlert(val)
        }
      }
このページは役に立ちましたか?
0 / 5 - 0 評価