Vuex、State和Getters

Question

我在将我的数据向下反应到一些图表上遇到了困难。

我有一个vuex商店，当应用程序被挂载时，它会触发一个动作来执行一些API cals (总共10个)。每个API调用都与一个部门相关，并返回一个包含所有订单的数组。这一切都很好，我可以在dev工具中看到vuex格式的数据。

在我的主页上，我尝试构建10个不同的图表。每个图表都有与部门订单相关的数据集。数据集被分解以显示延迟订单、准时、已发货等。

因此，在将数据传递给图表的组件中，我使用状态getter来填充我的数据集。所以我的一个getter是这样的：

  getDepartmentLateOrders: (state) => (department) => {
    let resultArray = []
    state[department].forEach(function(order, index) {
        let now = new Date()
        let orderShipDate = new Date(order.ExpectedShipDate)
        let diff = date.getDateDiff(orderShipDate, now)
        let statusCheck = outOfProductionStatuses
        if(diff < 0 && !order.Invoiced && !statusCheck.includes(order.LastStatus)) {
            resultArray.push(order)
        }
    })
    return resultArray

这是我的店铺：

    const store = new Vuex.Store({
  state: {
    //These are filled from setOrdersData()
    dept1Orders: [],
    dept2Orders: [],
    dept3Orders: [],
    loaded: false,
    departmentsArray : ['dept1', 'dept2', 'dept3']
  },
  actions: {
    //This is called when the app is mounted
    loadOrders: function({ commit }) {
        let departmentSeach = this.state.departmentsArray
        departmentSeach.forEach(function(dept, index) {
            api.getDeptStatus(dept.toLowerCase()).then((response) => {
                store.commit('setOrdersData', { dept: dept, orders: response })
            }, (err) => {
                console.log(err)
            })
        })
        this.state.loaded = true
    }
  },
  mutations: {
    //For reference: https://vuex.vuejs.org/en/mutations.html
    setOrdersData: (state, payload) => {
        Vue.set(state, payload.dept+'Orders', payload.orders)
    },
  },
  getters: {
    getDepartmentLateOrders: (state) => (department) => {
        let resultArray = []
        state[department].forEach(function(order, index) {
            let now = new Date()
            let orderShipDate = new Date(order.ExpectedShipDate)
            let diff = date.getDateDiff(orderShipDate, now)
            let statusCheck = outOfProductionStatuses
            if(diff < 0 && !order.Invoiced && !statusCheck.includes(order.LastStatus)) {
                resultArray.push(order)
            }
        })

        return resultArray
    },
    getDepartmentShipTodayOrders: (state) => (department) => {
        let resultArray = []
        state[department].forEach(function(order, index) {
            let now = new Date()
            let orderShipDate = new Date(order.ExpectedShipDate)
            let diff = date.getDateDiff(orderShipDate, now)
            let statusCheck = outOfProductionStatuses

            if(diff === 0 && !order.Invoiced && !statusCheck.includes(order.LastStatus)) { //TODO: Have this not exclude the out of production orders. But maybe have it highlight so it knows?
                resultArray.push(order)
            }
        })
        return resultArray
    },
    getDepartmentOutOfProductionOrders: (state) => (department) => {
        let resultArray = []
        let statusCheck = outOfProductionStatuses
        state[department].forEach(function(order, index) {
            if(statusCheck.includes(order.LastStatus) && !order.Invoiced) {
                resultArray.push(order)
            }
        })
        return resultArray
    },
    getDepartmentShippedOrders: (state) => (department) => {
        let resultArray = []
        //let statusCheck = ['SHIPPING-3']
        state[department].forEach(function(order, index) {
            if(order.Invoiced) {
                resultArray.push(order)
            }
        })
        return resultArray
    },
    getDepartmentOnTimeOrders: (state) => (department) => {
        let resultArray = []
        //let statusCheck = ['SHIPPING-3']
        state[department].forEach(function(order, index) {
            let now = new Date()
            let orderShipDate = new Date(order.ExpectedShipDate)
            let diff = date.getDateDiff(orderShipDate, now)
            let statusCheck = outOfProductionStatuses
            if(diff > 0 && !order.Invoiced && !statusCheck.includes(order.LastStatus)) {
                resultArray.push(order)
            }
        })
        return resultArray
    },
  }
})

下面是我如何获取组件中需要的数据：

fillData () {
            let store = this.$store;
            let departmentSeach = this.departmentArray
            let that = this

            departmentSeach.forEach(function(dept, index) {
                console.log('get '+ dept)
                that[dept+'DataCollection'] = Object.assign({}, that[dept+'DataCollection'], 
                    {
                    datasets: [{
                        data: [
                            store.getters.getDepartmentShipTodayOrders(dept+'Orders').length, 
                            store.getters.getDepartmentLateOrders(dept+'Orders').length,
                            store.getters.getDepartmentOutOfProductionOrders(dept+'Orders').length,
                            store.getters.getDepartmentShippedOrders(dept+'Orders').length,
                            store.getters.getDepartmentOnTimeOrders(dept+'Orders').length
                            //12, 13, 14, 15, 16
                        ],
                        backgroundColor: that.defaultColors
                    }],
                    // These labels appear in the legend and in the tooltips when hovering different arcs
                    labels: that.defaultLables
                })
            })


            this.loadingVisible = false
            this.loaded = true

        },

问题是我的getter在我所有的API请求完成之前就已经运行了。我认为这很好，因为它是反应式的，所以当数据传入并设置状态数据时，使用getter的组件将有数据绑定到它，因为我引用的是使用状态数据的state getter。

在我最初加载的charts页面上，除了第一个部门(可能是因为API调用足够快)之外，图表不会与数据一起呈现。如果我在应用程序中查看一个页面并返回到图表页面，我的所有数据都在那里，用于其他部门，它工作得很好。

所以我的问题是。在这个例子中，我做错了什么，数据不是反应性的？我确信这是我忽略的某种反应性问题。

Answer 1

所以这一切相关的主要问题是我如何为图表实例化我的数据。我在data中设置空的部门订单对象。但是，正确的做法是使用computed，因为数据是从存储中派生出来的，并且会在数据进入我的存储和getters响应时对数据作出反应。在我这样做之后，一切都运行得很好。