クライアントサイドをサーバ側の状態管理とhttpリクエストと同期させる

Question

コンポーネント間のデータを共有する必要があるショッピングカートを構築しています。かなりハードなVuexの使用を避けるために、理解するために、それは動作します。

国家管理は、このように動作します：私の

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が必要です

いずれかのアイデア、またはより良いアプローチは歓迎です。ありがとう。

Answer 1

送信するコンテンツをサーバーに記録するだけです。それはthis.sharedのように見えます。あなたはそれがあなたが期待する内容ではないことがわかります。サーバーはアイテムを期待している可能性が高く、アイテムの配列を送信しています。