使客户端与服务器端保持同步-状态管理和http请求

Question

我正在构建购物车，其中组件之间的某些数据需要共享-我构建了某种简单的状态管理，以防止使用Vuex，这很难理解，并且可以正常工作。

国家管理部门以这种方式工作：

1.首先我创建分离的存储/状态文件，这是香草js（我正在使用lodash）

import _    from    'lodash'

export default {

    data: {
        bag: []
    },

    add(item) {
        let found = _.find(this.data.bag, ['artnr', item.ID])

        if ( !found ) {
            this.data.bag.push({
                artnr: item.ID,
                name: item.post_name,
                qty: 1
            }) 
        } else {
            found.qty++
        }
    }

}

2.在我的视图组件中，导入状态/存储文件

import Store   from    '../stores/BagStore'

因此，然后创建新的数据对象属性（称为共享）并将数据分配给Store.data

data() {
  return {
    item: [],
    shared: Store.data
  }
}

3.最后我有了从状态使用方法的基本方法

methods: {
   addItem() {
      Store.add(this.item)
   }
}

事情做得很完美，但是我也想发出一个POST HTTP请求，它将通过API将数据存储在数据库中，如果用户重新加载页面，他添加的项目也应该在这里。

我们在Laravel中构建了API，要求传递2个值（artnr和qty），我试图做这样的事情

methods: {
   addItem() {
      Store.add(this.item)
      BagService.create(this.shared)
         .then(shared => {
             this.$dispatch('itemWasAdded', shared.data)
         })
   }
}

但是后来我得到了错误

422（不可处理实体）必填字段artnr和qty

任何想法或更好的方法都是欢迎的。

Answer 1

只需记录要发送到服务器的内容。 看起来是this.shared 。 您会看到它不是您期望的内容。 服务器可能需要一个项目，并且您正在发送一系列项目。