Vuex Store Getter doesn't get the new value on time.isoWeek()

Viewed 46

In my template I can get the time from my store and that works fine. It updates whenever time changes. But when I map the getters from the state like this:

computed: {
  ...mapGetters({
    week: "week",
    year: "year",
    time: "time",
  }),
}

The values week and year never change. Why is that? What am I missing?

But doing this in the template works: $store.getters['week']

My State looks like this:

const state = {
  time: moment(),
};

Actions:

const actions = {
  changeTimeToNextWeek(context) {
    context.commit("changeTimeToNextWeek");
  },
  changeTimeToPreviousWeek(context) {
    context.commit("changeTimeToPreviousWeek");
  },
};

Mutations:

const mutations = {
  changeTimeToNextWeek(state) {
    state.time = state.time.add(1, "week");
  },
  changeTimeToPreviousWeek(state) {
    state.time = state.time.subtract(1, "week");
  },
};

My getters look like this:

const getters = {    
  week: (state, getters) => {
    return getters.time.isoWeek();
  },
  year: (state, getters) => {
    return state.time.isoWeekYear();
  },
  time: (state, getters) => {
    return state.time;
  },
};
1 Answers

moment() js is not reactive , so try to use like below in getters

moment(state.time).....

just keep the date/time as string into time variable as per your require format. and initialize the state time as you want.

Related