Как передать данные из одного компонента в другой?

Question

[Vova135798]

У меня есть два компонента: cart и product. В компоненте cart прописаны функция для добавления товара в корзину. Как мне передавать данные товара из одного компонента в другой для добавления товара в корзину? Или лучше сделать корзину на php?
cart.vue:

<script>
export default {
data() {
    return {
        cart: [],
        newProduct: [],
        links: [
            {
                title: "Профиль",
                href: "/user/vova/profile",
            },
            {
                title: "Посты",
                href: "/user/vova/posts",
            },
        ],
        

    };
},
    methods: {
        addProduct(){
            if(this.cart['id'] == this.newProduct['id']){
                this.cart['id']['quantity']++;
            }
            else{
                this.cart.push(this.newProduct);
                this.newProduct = [];
                this.saveCart();
            }
        },
        
        saveCart(){
            const parsed = JSON.stringify(this.cats);
            localStorage.setItem('cats', parsed);
            console.log(this.parsed);
        }
    }
};
</script>

Comments

[Антон Антон]

pimen

Answer 1

[Артём Силантьев]

Для этого надо использовать хранилища данных (data store).
Например vuex, но лучше pinia (https://pinia.vuejs.org/)

Так же можно написать кастомное хранилища, например через возможности vue3:
https://codesandbox.io/s/angry-scott-o27oz9
Хотя если в проекте будет использоваться рендер, то лучше всё же использовать vuex или pinia.

Идея в том, что данные меняются не в компоненте, а в отдельной сущности для хранения данных, и далее они могут использоваться в нескольких других компонентах.