由於觀看地圖狀態不起作用

Question

我在組件中使用商店值並嘗試更新它。當我單擊按鈕時，存儲值發生更改，但更改未反映在組件輸出中（即{{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> 

店：

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

這裏的問題是Vue cannot detect，你是動態地添加新的屬性到query對象。

在此代碼：

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

要添加timestamp屬性query，這是以前沒有出現。因此它不會被動。爲了正確使用Vue，您需要使用Vue.set。

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

注意，你也需要做對的$gte財產下一行。

或者，您可以初始化查詢對象。

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