Как правильно использовать Vue.set ()?

Question

Я пытаюсь сделать массив в своем магазине реактивным.

В настоящее время я пытался использовать: ключ для принудительного обновления, $ forceUpdate () и Vue.set ().Первоначально я получал и обновлял данные в компоненте календаря, но я переместил логику получения данных в хранилище в надежде, что это каким-то образом сделает ее реактивной.Текущий атрибут показывает красную точку в установленной дате v-календаря.Из того, что я могу сказать, массив заполняется объектами с точно такой же структурой, как у одного атрибута, но он не реагирует.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: true,
    odata: [],
    attributes: [{
      dates: new Date(),
      dot: 'red',
      customdata: {
        programEventsSystemrecordID: 1234
      }
    }]

  },
  mutations: {
    updateAtts (state) {
      let singleAtt = {}
      let index = 0

      state.odata.forEach((ticket) => {
        Vue.set(singleAtt, 'dot', 'red')
        Vue.set(singleAtt, 'dates', new Date(ticket.ProgramEventsStartdate))
        Vue.set(singleAtt, 'customData', {})

        singleAtt.customData = {
          programEventsSystemrecordID: ticket.ProgramEventsSystemrecordID
        }

        Vue.set(state.attributes, index, singleAtt)

        index++
      })
    },
    updateOdata (state, odata) {
      state.odata = odata
    },
    changeLoadingState (state, loading) {
      state.loading = loading
    }

  },
  actions: {
    loadData ({ commit }) {
      axios.get('https://blackbaud-odata-cal-bizcswpdjy.now.sh')
        .then((response) => {
          commit('updateOdata', response.data)
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          console.log(commit('updateAtts'))
          commit('changeLoadingState', false)
        })
    }

  }
})

Я ожидаю, что массив, который заполняется в vue, обновит DOM.Нет сообщений об ошибках.

Answer 1

Vue.set бесполезен в вашем случае. В большинстве случаев это бесполезно.

Необходимо добавить новые свойства в том состоянии, в котором они изначально не были.

Здесь у вас есть только одно свойство состояния, построенное из другого.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        loading: true,
        odata: [],
        attributes: [{
            dates: new Date(),
            dot: 'red',
            customdata: {
                programEventsSystemrecordID: 1234
            }
        }]

    },
    mutations: {
        updateAtts (state) {
            state.attributes = state.odata.map(t=>({
                dot: 'red',
                dates: new Date(t.ProgramEventsStartdate),
                customData: {programEventsSystemrecordID: t.ProgramEventsSystemrecordID}
            }))
        },
        updateOdata (state, odata) {
            state.odata = odata
        },
        changeLoadingState (state, loading) {
            state.loading = loading
        }

    },
    actions: {
        loadData ({ commit }) {
            axios.get('https://blackbaud-odata-cal-bizcswpdjy.now.sh')
                .then((response) => {
                    commit('updateOdata', response.data)
                })
                .catch((err) => {
                    console.log(err)
                })
                .finally(() => {
                    console.log(commit('updateAtts'))
                    commit('changeLoadingState', false)
                })
        }

    }
})