コンポーネント間のデータを共有する必要があるショッピングカートを構築しています。かなりハードなVuexの使用を避けるために、理解するために、それは動作します。クライアントサイドをサーバ側の状態管理とhttpリクエストと同期させる
国家管理は、このように動作します:私の
1.Firstは(私はlodashを使用しています)バニラJSで分離された店舗/状態ファイルを作成
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は、それでは、私は、新しいデータオブジェクトのプロパティを作成して共有と呼ばれ、Store.data
にデータを割り当てる州/ストアファイルにimport Store from '../stores/BagStore'
をインポート最後に
data() {
return {
item: [],
shared: Store.data
}
}
3.And私は状態
methods: {
addItem() {
Store.add(this.item)
}
}
と完璧なこの事を仕事からメソッドを使用する基本的な方法がありますが、私は中のデータを保存することになる、あまりにもPOSTのHTTPリクエストを作りたいですAPIを使用してデータベースを更新し、ユーザーがページを再読み込みすると、追加したアイテムがここになければなりません。私たちは、Laravelに2つの値(artnrと数量)を渡すために、そのrequureをAPIを建て
、私はこの
methods: {
addItem() {
Store.add(this.item)
BagService.create(this.shared)
.then(shared => {
this.$dispatch('itemWasAdded', shared.data)
})
}
}
のようなものを作ってみました。しかし、私はエラー
422(処理不能ですエンティティ)フィールドartnrとqtyが必要です
いずれかのアイデア、またはより良いアプローチは歓迎です。ありがとう。
このデータをサーバーに格納するのではなく、むしろcookieを使用してローカルで実行します。次に、クッキーをロードし、データベースから項目を取得します。あなたが本当にもちろんサーバーのサイトにそれらを保存したい場合を除きます。 –
このメッセージは、正しい情報をサーバーに送信していないことを示しています。商品番号と数量が不足しているか間違っています。私の場合、ブラウザのデベロッパーコンソール(通常はF12)でPOSTリクエストの内容を確認してください。 –
@HerrDerb残念ながらクッキーはオプションではありません。 メッセージの意味を知っていますが、理由を理解できません –