如何正确使用 Vue.set()？

Question

我正在尝试在我的商店中创建一个响应式数组。

我目前尝试使用 :key 强制更新、$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)
                })
        }

    }
})