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

问题描述：

我正在构建购物车，其中组件之间的一些数据需要共享 - 我建立了一些简单的状态管理以避免使用Vuex，这很难理解，而且有效。保持客户端与服务器端同步 - 状态管理和http请求

这样的国家管理工作：

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.In我的看法分量I进口国家/存储文件

import Store from '../stores/BagStore'

于是我创建新的数据对象属性，称为共享和分配数据Store.data

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

3.And最后我有使用方法，从状态

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

这事工作完美的基本方法，但我想要一个HTTP POST请求太多，这将数据存储在数据库通过API，如果用户重新加载页面，他添加的项目应该在这里。

我们建立API中Laravel，即requure通过2个值（artnr物品和数量），我试图做这样的事情

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

但后来我得到了错误

422（无法处理的实体）字段artnr和数量是必需的

任何想法，或更好的方法是welcome.Thanks。

不是将这些数据存储在服务器上，而是使用cookie来做到这一点。然后你只需加载你的cookie，并从数据库中获取项目。除非你确实真的想要将它们存储在服务器网站上。 –

该消息表明您不会将正确的信息发送到服务器。商品编号和数量缺失或错误。检查您的POST请求在浏览器的开发控制台中发送的内容（通常是F12） –

@HerrDerb不幸的是，cookies不适用于我的情况。我知道什么消息表明，但无法弄清楚为什么 –

答

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

谢谢你的答复。你是对的，console.log返回对象数组，所以我应该尝试使用传递对象？ –

现在我很想知道如何将每个对象从this.shared传递给服务器，任何想法？谢谢。 –

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

相关推荐