how to implement a two way binding between components that are not parent and child in Vue 3 js-CodePudding

I'm using this free coffee API to fetch data.

Each coffee drink item is populated in a Vue Card component. The Card component has a counter: 0 that the user can increment() and decrement().

Card.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)
        }
    },
}

I'm using the Reactivity API for state management.

Store.js(state management)

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);
        }
    }
})

Finally, I have a Sidebar(shopping cart) component that uses the Reactivity API to reactively add coffee drinks to the cart based on the Changes on the Card component.

I implemented a remove button for the sidebar such that the remove() function will reset the count to zero and remove it from the cart. You can see the code in the Store.js section. The issue I am having is that everything is updated in the shopping cart and the item is removed as expected but nothing happens in the Card Component. The counter in the Card Component does not update.

note: that the Card Component and Sidebar Compnent do not have a parent and child relationship.

Here is a link for the codesandbox

CodePudding user response：

each coffee has to possess its own count field. but you have count for each Card Component. also you're re-assigning HotView and IcedView components' state with fetching data in mounted() hook

I get it work here