vue watch mapState funktioniert nicht

Question

Ich verwende einen Speicherwert in meiner Komponente und versuche, ihn zu aktualisieren. Der Speicherwert wird geändert, wenn ich auf die Schaltfläche klicke, aber die Änderung spiegelt sich nicht in der Komponentenausgabe wider (zB {{query}}

)

<template> 
     span {{query}} 
     button(@click='updateQuery') 
    </template> 

    <script> 
    export default { 
     computed: mapState('map', [ 
      'query' 
     ]), 
     methods: { 
      ...mapMutations('map', [ 
       'setStart' 
      ]), 
      updateQuery() { 
       this.setStart(new Date()); 
      } 
     } 
    } 
    </script> 

store:

export default { 
    namespaced: true, 
    state: { 
     query: {}, 
     start: null, 
     end: null 
    }, 
    mutations: { 
     setQuery(state, value) { state.query = value }, 
     setStart(state, value) { 
      state.start = value; 
      state.query.timestamp = state.query.timestamp ? state.query.timestamp : {}; 
      state.query.timestamp.$gte = value; 
     }, 
     setEnd(state, value) { 
      state.end = value; 
      state.query.timestamp = state.query.timestamp ? state.query.timestamp : {}; 
      state.query.timestamp.$lte = value; 
     }, 
    } 
} 

Answer 1

Das Problem hier ist Vue cannot detect, die Sie dynamisch neue Objekte, die das query Objekt hinzufügen.

In diesem Code:

state.query.timestamp = state.query.timestamp ? state.query.timestamp : {}; 

Sie fügen eine timestamp Eigenschaft query, die vorher nicht da war. Es wird daher nicht reaktiv sein. Um mit Vue richtig arbeiten zu können, müssen Sie Vue.set verwenden.

Vue.set(state.query, `timestamp`, state.query.timestamp ? state.query.timestamp : {}) 

Hinweis, werden Sie auch, dass in der nächsten Zeile für die $gte Eigenschaft tun müssen.

Alternativ können Sie das Abfrageobjekt initialisieren.

state: { 
    query: { 
     timestamp:{ 
     $gte: null, 
     $lte: null 
     } 
    }, 
    start: null, 
    end: null 
},