Vuex и вложенный объект в вычисляемом свойстве вызывают проблему реактивности - PullRequest
0 голосов
/ 05 февраля 2020

Я использую хранилище 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
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...