Question

我一直难以让我的数据被反应到一些chartjs图表。

我有一个vuex商店，当安装应用程序时会激活一个动作以执行一些API cals（总共10个）。每个API调用都与一个部门相关，并返回所有订单的数组。一切正常，我可以在开发工具中看到vuex中的数据。

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

因此，在我将数据传递给图表的组件中，我使用状态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的组件会有数据绑定到它，因为我引用了状态的getter。使用状态数据。

在我的初始图表页面加载时，图表不会使用数据呈现，除了第一个部门（可能是因为API调用足够快）。如果我在应用程序中查看页面并返回到图表页面，那么我的所有数据都会存在于其他部门中，并且效果很好。

所以我的问题......在这个例子中我做错了什么，数据没有被反应？我确定它有某种反应性，我忽略了它。

Answer 1

所有与此相关的主要问题是我如何为图表实例化数据。我在data中设置了空的部门订单对象。但是，正确的方法是使用computed代替，因为数据来自商店，并且当数据进入我的商店并且吸气剂响应时将对数据产生反应。我做了之后一切正常。

Vuex，州，＆amp;吸气剂

1 个答案: