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

我最初在没有任何额外参数的情况下调用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
},

这假设您已经在根Vue实例的配置对象中传递了store（在您的示例中看似是#employees组件）：

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

Vue 2 + Vuex：在计算属性中使用状态变量

1 个答案: