Vux: Toast et alert show sont bidirectionnels et signalent toujours un avertissement lors de l'utilisation du flux de données unidirectionnel Vuex

Créé le 3 mai 2016  ·  12Commentaires  ·  Source: airyland/vux

Version

"vux": "0.0.106"

Android ou iOS, quel navigateur ?

Tout

Vos codes

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

Comportement attendu et comportement réel.

Parce qu'il est utilisé comme un composant global, ses sous-composants utilisent directement le flux de données unidirectionnel de vuex pour déclencher la fenêtre contextuelle, mais le toast et l'alerte sont tous deux bidirectionnels, ils continuent donc à signaler l'avertissement, et le trouble obsessionnel-compulsif est inconfortable .

Étapes pour reproduire le problème

Commentaire le plus utile

La combinaison de vuex+vux a également rencontré l'avertissement lié à twoWay lors de l'utilisation du composant Popup. Au début, je voulais aussi écouter les événements lorsque des changements étaient apportés !Plus tard, j'ai trouvé une nouvelle solution ici : les propriétés calculées

Voici un exemple simple

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

Par rapport à la surveillance des événements, il existe une couche supplémentaire d'encapsulation d'attributs de calcul, mais elle fait également ses adieux pour avertir

Tous les 12 commentaires

Alors, quelle est votre suggestion? TwoWay est dû au fait que le fonctionnement interne du composant changera le spectacle, sinon l'état sera anormal.

twoWay est juste pour vérifier s'il s'agit d'une liaison bidirectionnelle, maintenant il s'agit de vérifier l'heure d'avertissement

Je suggère donc d'annuler la vérification de liaison bidirectionnelle, mais vous modifiez toujours automatiquement la valeur de show en interne, de sorte que si vous utilisez bidirectionnellement en externe, vous pouvez modifier automatiquement la valeur.

Bien sûr, je suis ici pour contrôler la valeur du spectacle à l'extérieur.

Qu'en penses-tu?

N'est-ce pas juste vérifier ?

Bien sûr, c'est juste pour vérifier !

Vous n'avez pas besoin d'écrire twoWay, mais il est toujours lié par la synchronisation dans le composant, et il peut toujours être bidirectionnel

Je viens de muter à VUE depuis un mois, la route n'est pas profonde, j'espère conseiller

Ce devrait être juste une fonction de vérification pour la liaison des composants. Si vous n'avez pas besoin d'une liaison bidirectionnelle pour l'émission d'Alert, vous ne pouvez modifier la valeur de l'émission que via l'événement on-hide .

Oui, l'alerte est déjà là. Toast, j'ai défini setTimeout pour changer l'émission liée. Bien sûr, il est préférable d'avoir masqué.

Je pense aussi que toast et alert ne sont pas très compatibles avec vuex. Il est préférable d'avoir des événements masqués et de conserver la même interface que les alertes.

@JianleiZhang implémentera dans la prochaine version.

La combinaison de vuex+vux a également rencontré l'avertissement lié à twoWay lors de l'utilisation du composant Popup. Au début, je voulais aussi écouter les événements lorsque des changements étaient apportés !Plus tard, j'ai trouvé une nouvelle solution ici : les propriétés calculées

Voici un exemple simple

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

Par rapport à la surveillance des événements, il existe une couche supplémentaire d'encapsulation d'attributs de calcul, mais elle fait également ses adieux pour avertir

@pzxbc Génial :smiley:

@pzxbc J'ai découvert que l'envoi d'une mutation pour modifier la valeur de getshow, puis le calcul de l'attribut affiché transmettrait la valeur à la valeur d'affichage interne du composant contextuel pour modifier l'état du composant. C'est ce dont j'ai besoin ci-dessus, mais j'ai découvert que le prochain attribut de calcul affiché appellera la fonction this.updateShow liée à la définition, car j'utilise console.log pour trouver que la mutation est appelée deux fois.

Ma démarche est :

      set: function (val) {
        if (val === false){
          this.updateAlert(val)
        }
      }
Cette page vous a été utile?
0 / 5 - 0 notes