Vue的2 + Vuex：在計算財產

Question

使用狀態變量我有一對夫婦變量Vuex實例：

const store = new Vuex.Store({ 
    state: { 
    start_date: moment().startOf('year').format("MM/DD/YYYY"), 
    end_date: moment().format("MM/DD/YYYY") 
    }, 
    mutations: { 
    changeDate(state, date_obj) { 
     state.start_date = date_obj.start_date 
     state.end_date = date_obj.end_date 
    } 
    } 
}) 

，我有其中的日期屬性是從store繼承我的主要Vue的實例：

var employees = new Vue({ 
    el: '#employees', 
    computed: { 
    start_date() { 
     return store.state.start_date 
    }, 
    end_date() { 
     return store.state.end_date 
    }, 
    leads() { 
     let filter_obj = { 
     start_date: this.start_date, 
     end_date: this.end_date 
     } 
     return this.fetch('potential_clients', filter_obj) 
    } 
    }, 
    methods: { 
    fetch(model, args=null) { 
     return new Promise((resolve, reject) => { 
     console.log(resolve, reject) 
     let url = "/" + model + ".json" 
     console.log(url); 
     $.ajax({ 
      url: url, 
      data: args, 
      success: ((res) => { 
      console.log(res) 
      this[model] = res; 
      resolve(res) 
      }), 
      error: ((res) => { 
      reject(res) 
      }), 
      complete: (() => {}) 
     }) 
     }) 
    } 
    }, 
    mounted() { 
    this.fetch('potential_clients') 
    } 
}); 

和我最初叫this.fetch('potential_clients')沒有任何多餘的參數，但一次start_date和end_date值被改變，我想打電話給像上面leads()。但是，當我更改start_date和end_date的值時，沒有任何變化。

值得一提的是，當我使用Vue插件在Chrome中進行檢查時，單擊根組件，突然顯示視圖中的更改？很奇怪

Answer 1

任何對Vue實例will not be reactive範圍之外的變量的引用。這意味着您所引用的store對象不是被動的。

您需要參考的Vue實例的內部參考商店（this.$store），這是反應：

start_date() { 
    return this.$store.state.start_date 
}, 

這是假設你已經在你的根的配置對象傳遞的store Vue實例（在您的示例中，它似乎是#employees組件）：

var employees = new Vue({ 
    el: '#employees', 
    store: store, 
    ...