Я использую хранилище vuex для обработки сеанса и загрузки сеансов по умолчанию для разных страниц. onCreated
hook. Данные меняются, и в большинстве случаев они работают нормально, но теперь я заметил, что хотя я меняю данные, метод set / mutation не вызывается.
session. js (mixin для загрузки сеанса по умолчанию из основного компонента )
export default {
data () {
return {
defaultSession: {}
}
},
created () {
this.$store.dispatch('session/update', { data: this.defaultSession })
},
computed: {
sessionData: {
get () {
console.log('GETTER')
return this.$store.getters['session/sessionData']
},
set (session) {
console.log('SETTER')
this.$store.dispatch('session/update', { data: session })
}
}
}
}
store
export default {
namespaced: true,
state: {
session: {},
},
getters: {
session (state) {
return state.session
},
sessionData (state) {
return state.session.data
},
},
mutations: {
UPDATE (state, session) {
state.session = session
console.log('[Session] Updated')
}
},
actions: {
update: ({ commit }, data) => {
commit('UPDATE', data)
}
}
пример defaultSession (в компоненте)
defaultSession: {
name: '',
viewId: '',
defaultImage: null,
dataTable: [{
title: '',
data: [],
selected: [],
}],
imageTableData: [],
selectedIcons: []
},
Так что в моем компоненте я, например, обращаюсь к <input v-model="sessionData.name"/>
, но ни сеттер, ни мутация не называется. (Объект довольно вложенный, потому что я также храню данные таблицы внутри.)
ОБНОВЛЕНИЕ (возможное решение):
watch: {
sessionData: {
deep: true,
handler() {
//commit changes here
}
}
}