如何在 Vue 3 js 中實現非父子組件之間的雙向綁定

Question

我正在使用這個免費咖啡 API 來獲取數據。

每個咖啡飲料項目都填充在 Vue Card 組件中。 Card 組件有一個counter: 0 ，用戶可以使用increment()和decrement() 。

卡片.vue

import {store} from '../store'
import {ref} from 'vue'
export default {
    data() {
        return {
            store,
            count: ref(0)
        }
    },
    props: ['drink'],
    methods: {
        decrement(){
            (this.count != 0) ? this.count-- : this.count = 0
            store.decrement(this.drink.title,this.drink.id,this.count)
        },
        increment(){
            this.count++
            store.increment(this.drink.title,this.drink.id,this.count)
        }
    },
}

我正在使用Reactivity API進行 state 管理。

Store.js （狀態管理）

import { reactive, ref } from 'vue'

export const store = reactive({
    drinks : ref([]),

    increment(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);

        if(drink) {
            drink.drinkCount = count
        } else {
            this.drinks.push({
                drinkID : id,
                drinkName : drinkName,
                drinkCount : count,
            })
        }
    },
    decrement(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = count
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    },
    remove(id) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = 0
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    }
})

最后，我有一個 Sidebar（購物車）組件，它使用 Reactivity API 根據 Card 組件上的更改將咖啡飲料反應性地添加到購物車中。

我為側邊欄實現了一個刪除按鈕，這樣remove() function 會將計數重置為零並將其從購物車中刪除。 您可以在 Store.js 部分中查看代碼。 我遇到的問題是購物車中的所有內容都已更新並且該項目已按預期刪除但Card Component中沒有任何反應。 Card 組件中的counter不會更新。

注意： Card Component和Sidebar Compnent沒有父子關系。

這是codesandbox的鏈接

Answer 1

每種咖啡都必須擁有自己的count字段。 但是您對每個Card Component都有count 。 您還重新分配HotView和IcedView組件的 state 並在mounted()掛鈎中獲取數據

我 在這里工作