VueJS observe le paramètre branché

Question

Je commence avec VueJS 2 et j'ai créé un simple plugin qui ajoute un paramètre à l'instance de Vue.

J'ai un problème car lorsque je mets à jour cette valeur mes propriétés calculées sont toujours les mêmes.

Mon exemple le code de plugin:

export default function (Vue) { 
    Vue.MyProperty = "test" 

    Object.defineProperties(Vue.prototype, { 
     "$myProperty": { 
      "get": function() { 
       return Vue.MyProperty 
      }, 

      "set": function (value) { 
       Vue.MyProperty = value 

       return this 
      } 
     } 
    }) 
} 

Et le code de mon composant

export default { 
    "computed": { 
     "test": function() { 
      return this.$myProperty 
     } 
    } 
} 

Quand j'ai changé this.$myProperty dans d'autres composants mes composant retourne la valeur Vaid (dans l'exemple quand j'ai changé de "test" en "newvalue" I peut voir "newvalue") mais la propriété calculée test est toujours ancienne valeur ("test" dans mon exemple).

J'ai essayé d'utiliser this.$set(this, "$myProperty", value) mais cela ne fonctionne toujours pas.

Comment utiliser ou déclarer cette propriété pour l'utiliser dans des propriétés calculées ou surveillées?

Answer 1

La raison pour laquelle la valeur des données ne sont pas mis à jour automatiquement en est calculée parce que la propriété que vous avez ajouté à Vue, MyProperty est pas un observé propriété. Fondamentalement, la réactivité de Vue fonctionne car toutes les valeurs ajoutées aux données sont converties en propriétés observées; sous le capot ils sont convertis en paires getter/setter avec du code supplémentaire de sorte que lorsque l'une de ces propriétés change, Vue sait propager les modifications à toutes les choses qui dépendent de sa valeur.

Le code dans la question, cependant, ajoute simplement une propriété normale à l'objet Vue. Vous pouvez le changer, mais ce n'est pas réactif. Cela dit, il est relativement facile de le rendre réactif. Je couvre la façon de le faire dans les commentaires à ma réponse here. Fondamentalement, au lieu d'ajouter votre propriété à Vue, créez simplement un nouvel objet Vue (qui a un surcoût très faible) et faites de la propriété que vous voulez réactif une propriété de cette vue. Voici un exemple de travail.

console.clear() 
 

 
function MyPlugin(Vue) { 
 
    let store = new Vue({data:{MyProperty: "some value"}}) 
 

 
    Object.defineProperties(Vue.prototype, { 
 
     "$myProperty": { 
 
      "get": function() { 
 
       return store.MyProperty 
 
      }, 
 

 
      "set": function (value) { 
 
       store.MyProperty = value 
 

 
       return this 
 
      } 
 
     } 
 
    }) 
 
} 
 

 
Vue.use(MyPlugin) 
 

 
const MyComponent = { 
 
    template:`<div>{{test}}</div>`, 
 
    "computed": { 
 
     "test": function() { 
 
      return this.$myProperty 
 
     } 
 
    } 
 
} 
 

 
new Vue({ 
 
    el: "#app", 
 
    components:{ 
 
    MyComponent 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <my-component></my-component> 
 
    <button @click="$myProperty = 'new value'">Change</button> 
 
</div>