Vue 2 + Vuex: Using state variables in computed property

Question

I have a Vuex instance with a couple variables:

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

and I have my main Vue instance where the date properties are inherited from the 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')
  }
});

and I initially call this.fetch('potential_clients') without any extra arguments, however once the value for start_date and end_date are changed, I want to call something like leads() above. However nothing changes when I change the values of start_date and end_date.

It might be worth noting that when I inspect in Chrome with the Vue plugin, and click on the root component, all of a sudden the changes show in the view? very odd

thanksd thanksd · Accepted Answer · 2017-07-25T16:16:40

Any reference to a variable outside the scope of a Vue instance will not be reactive. This means the store object you are referencing is not reactive.

You need to refer to the Vue instance's internal reference to the store (this.$store), which is reactive:

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

This is assuming you've passed the store in the config object of your root Vue instance (which in your example appears to be the #employees component):

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

Vue 2 + Vuex: Using state variables in computed property

1 Answers