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)
                })
        }

    }
})

如何正确使用Vue.set（）？

1 个答案: