Vux: Sowohl die Toast- als auch die Alert-Show sind bidirektional und melden immer eine Warnung, wenn der vuex-Einweg-Datenfluss verwendet wird

Erstellt am 3. Mai 2016  ·  12Kommentare  ·  Quelle: airyland/vux

Ausführung

"vux": "0.0.106"

Android oder iOS, welcher Browser?

Alle

Ihre Codes

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

Erwartetes Verhalten und tatsächliches Verhalten.

Da es als globale Komponente verwendet wird, verwenden seine Unterkomponenten den vuex-Einweg-Datenfluss direkt, um das Popup auszulösen, aber der Toast und die Warnshow sind beide zwei Wege, sodass sie weiterhin Warnung melden, und die Zwangsstörung ist unangenehm .

Schritte zum Reproduzieren des Problems

Hilfreichster Kommentar

Die Kombination von vuex+vux stieß auch auf die an twoWay gebundene Warnung, wenn die Popup-Komponente verwendet wurde. Am Anfang wollte ich auch bei Veränderungen mithören, was passiert!Später habe ich hier eine neue Lösung gefunden: berechnete Eigenschaften

Hier ist ein einfaches Beispiel

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

Im Vergleich zu Überwachungsereignissen gibt es eine zusätzliche Schicht der Kapselung von Berechnungsattributen, aber es verabschiedet sich auch von einer Warnung

Alle 12 Kommentare

Also, was ist Ihr Vorschlag? TwoWay liegt daran, dass der interne Betrieb der Komponente die Show ändert, andernfalls ist der Status anormal.

twoWay ist nur, um zu überprüfen, ob es eine Zwei-Wege-Bindung ist, jetzt ist es, die Zeitwarnung zu überprüfen

Ich schlage daher vor, die bidirektionale Bindungsüberprüfung abzubrechen, aber Sie ändern den Wert von show intern immer noch automatisch, sodass Sie bei einer externen bidirektionalen Verwendung den Wert automatisch ändern können.

Natürlich bin ich hier, um den Wert von show extern zu kontrollieren.

Was denkst du?

Wird nicht nur überprüft?

Natürlich wird nur überprüft!

Sie müssen nicht twoWay schreiben, aber es ist immer noch durch die Synchronisierung in der Komponente gebunden und kann immer noch bidirektional sein

Ich bin gerade für einen Monat zu VUE gewechselt, der Weg ist nicht tief, ich hoffe, Sie beraten zu können 😄

Es sollte nur eine Verifizierungsfunktion für die Komponentenbindung sein. Wenn Sie für die Show von Alert keine bidirektionale Bindung benötigen, können Sie den Wert von show nur über das Ereignis on-hide ändern.

Ja, die Benachrichtigung ist bereits da. Toast, ich habe setTimeout gesetzt, um die gebundene Show zu ändern. Natürlich ist es am besten, on-hide zu haben.

Ich denke auch, dass Toast und Alert nicht sehr kompatibel mit vuex sind. Es ist am besten, Ereignisse zu verbergen und die gleiche Benutzeroberfläche wie Alerts beizubehalten.

@JianleiZhang Wird bei der nächsten Version implementiert.

Die Kombination von vuex+vux stieß auch auf die an twoWay gebundene Warnung, wenn die Popup-Komponente verwendet wurde. Am Anfang wollte ich auch bei Veränderungen mithören, was passiert!Später habe ich hier eine neue Lösung gefunden: berechnete Eigenschaften

Hier ist ein einfaches Beispiel

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

Im Vergleich zu Überwachungsereignissen gibt es eine zusätzliche Schicht der Kapselung von Berechnungsattributen, aber es verabschiedet sich auch von einer Warnung

@pzxbc Genial :

@pzxbc Ich habe festgestellt, dass das

Mein Ansatz ist:

      set: function (val) {
        if (val === false){
          this.updateAlert(val)
        }
      }
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen