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
    }
  }
})

我有我的主Vue实例，其中日期属性是从store继承的：

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')
  }
});

我最初称之为。fetch（'potential_clients'）不带任何额外参数，但是一旦start_date和end_date的值更改，我想调用上面的leads（）之类的函数。但是，当我更改开始日期和结束日期的值时，没有任何变化。

可能值得注意的是，当我使用Vue插件在Chrome中进行检查，并单击根组件时，视图中会突然显示更改？很奇怪

Answer 1

对Vue实例范围之外的变量的任何引用都不会是被动的。这意味着您正在引用的存储对象不是被动的。

您需要引用Vue实例对store的内部引用（this.$store），它是反应性的：

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

这是假设您已在根Vue实例的配置对象中传递了存储（在您的示例中，它似乎是#employees组件）：

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