0
votes

VUEX `personnes [0] = {{âge: les gens [0] .AGE + 1};` `ne déclenchera pas de re-rendu, pourquoi?

S'il vous plaît voir cet exemple minimum:

MARKUP P>

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    people: [{ age: 1 }]
  },
  mutations: {
    changePeople1Works(state) {
      let people = state.people;
      people[0].age = people[0].age + 1;
    },
    changePeopleNotWorking(state) {
      let people = state.people;
      people[0] = { age: people[0].age + 1 };
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

javascript object vue.js vuejs2 vuex

0 commentaires

3 Réponses :

1
votes

de Les docs

VUE ne peut pas détecter l'addition ou la suppression de la propriété.
et

... il est possible d'ajouter des propriétés réactives à un objet imbriqué à l'aide de la méthode VUE.SeSe (objet, nom de propriété, valeur)
et

VUE ne peut pas détecter les modifications suivantes à un tableau:

Lorsque vous définissez directement un élément avec l'index, par exemple. vm.items [IndexOfitem] = NewValue
Lorsque vous modifiez la longueur de la matrice, par exemple. vm.items.length = nouvelle-longueur
Mais il ne dit rien sur la mutation d'un objet existant [propriété] .
Dans le premier exemple, une propriété d'objet existante est en cours de mutation, de sorte que cela fonctionne. (La propriété Âge du premier élément du Personnes Array.) Dans le deuxième exemple, un élément de tableau est en cours de définition par index, de sorte qu'il ne fonctionne pas. (Le 0 index du personnes tableau.) Cela peut sembler contre-intuitif car un indice de tableau précédemment défini ne peut pas être modifié par index, mais une propriété d'objet définie précédemment peut. Je suppose que la raison de cela a beaucoup à voir avec objet.defineProperty et le processus de réactivité de VUE. (m'a confondu au début aussi.)



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     C'est une mise en garde de la réactivité de Vue.Js.
Vous devez utiliser  vue.set  si vous souhaitez modifier le lien vers objet.
Par exemple, il fonctionnera:  xxx  
  https://codesandbox.io/s/dreamy-cdn-x90sk?file=/src/main.js   
 upd:  
 de docs :  

   VUE ne peut pas détecter les modifications suivantes à un tableau: 
  
  
 Lorsque vous définissez directement un élément avec l'index, par exemple vm.items [IndexOfitem] = NewValue 
  
  
 Lorsque vous modifiez la longueur du tableau, par exemple. vm.items.length = nouvelle-longueur 
  xxx  
 donc, à l'aide d'un tableau Vous ne pouvez pas modifier l'élément par index (même l'élément existant), car il n'est pas réactif.  
 mais vous pouvez utiliser   xxx  
 par exemple:   xxx  
 upd 2.
 1  et  2  ils ne sont pas les mêmes. Dans le premier exemple, nous ne ré-attribuons pas l'élément de tableau par lien, mais nous modifions la propriété de l'objet observable. Si vous regardez l'état dans  console.log  vous verrez, que les objets de tableau (qui ont été initialisés) sont observables. Ainsi, Vue est capable de regarder des changements là-bas.  
                                     


                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Cela n'explique toujours pas ce que postuit.  1  et  2  Les deux ne doivent pas fonctionner selon les déclarations que vous avez publiées de Vue Docs.  Lorsque vous définissez directement un élément avec l'index, par exemple. vm.items [indexofitem] = newvalue  op est exactement cela dans  1 .                                                

                                                
                                                                                    

                                    

                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Les propriétés des objets unis sont réactives (définies comme une paire de getter / setter), tandis que les index de tableau ne sont pas: 
     p> 
 Cette affectation de l'élément de tableau Résultats dans un objet uni non réactif:  p>  xxx  pré> 
 C'est la limitation de  VUE Réactivité  pour les tableaux:  P> 

   VUE ne peut pas détecter les modifications suivantes à un tableau:  p>
  
  

   Lorsque vous définissez directement un élément avec l'index, par exemple.  vm.items [IndexOfitem] = NewValue  Code>  LI>
  
 Lorsque vous modifiez la longueur de la matrice, par exemple.  vm.items.length = nouvelle-longueur  code>  li>
   ul>
 blockQuote>  Il peut être adressé avec  vue.set  code> ou tableau  épissure  code>, comme la documentation suggère:  P> 
  let [person, ...people] = state.people;
  state.people = [{ age: person.age + 1}, ...people];

                                

                                                                    
                                    
                                    
                                        0 commentaires