I attempted to build a scheduler app using vuex. To set up the scheduling, I utilized a state property named "scheduleController" which is structured as an object shown below.
const state = {
scheduleController: {
2020: {
11: {
month: "November",
count: [{
days: [],
timers: [{
from: null,
interval: null,
to: null
}]
}]
}
12: {
month: "December",
...
}
}
}
}
Each time I click on an add button, another object should be added to the timers array to create multiple schedules for the selected days in the month. This is achieved through the following mutation:
addTimer: (state, indices) => {
let timer = {
from: null,
to: null,
interval: null,
};
//indices[0] represents the year, indices[1] represents the month-index
//and indices[2] represents the nth element of count array where
//an empty timer needs to be added.
Vue.set(state.scheduleController[indices[0]][indices[1]].count[indices[2]].timers, 1, timer)
}
The state changes as expected but it lacks reactivity. I have to navigate to another view and then return to witness the state change. How can I ensure it is reactive?
Initially, in the code above, I used
state.scheduleController[indices[0]][indices[1]].count[indices[2]].timers.push(timer)
instead of the Vue.set function. However, even after making that change based on this link, it still did not work. Thank you. https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats