如何在 Vue 3 js 中实现非父子组件之间的双向绑定

Question

我正在使用 this 免费咖啡 API 来获取数据。

每个咖啡饮料项目都填充在一个 Vue Card 组件中。 Card 组件有一个 counter: 0 用户可以 increment() 和 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)
        }
    },
}

我正在使用 Reactivity API 进行状态管理。

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

最后，我有一个侧边栏（购物车）组件，它使用 Reactivity API 根据 Card 组件上的更改将咖啡饮料反应性地添加到购物车。

我为边栏实现了一个删除按钮，这样 remove() 函数会将计数重置为零并将其从购物车中删除。您可以在 Store.js 部分查看代码。我遇到的问题是购物车中的所有内容都已更新并且该项目已按预期删除但 Card Component 中没有任何反应。卡片组件中的counter没有更新。

注意：Card Component 和 Sidebar Compnent 没有父子关系。

这是 codesandbox

的 link

Answer 1

每种咖啡都必须拥有自己的count领域。但是每个 Card Component 都有 count。你也是 re-assigning HotView 和 IcedView 组件的状态，在 mounted() 钩子

中获取数据

我搞定了here

如何在 Vue 3 js 中实现非父子组件之间的双向绑定

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

javascript

vue.js

vue-component

two-way-binding

vue-reactivity