how to transfer and change a variable in different components? vue 3-CodePudding

how to transfer and change a variable in different components. I have an AllItems Page and a Header component. When clicking on the button in AllItems, I want to change the value in the Header. Is it possible to do this without passing the AllItems page itself to the Header component (<all Items @count='count'/>) - because they are duplicated.

AllItems button
 <div  id="btn" :count='count'  @click="addTo(id)">Add to cart</div>
  addTo(id){
   this.$emit('addToCart');
   this.cart.push(this.filteredItems[id])
      }    
  Header button

   <p>{{ count }}</p>
 <allItems @addtoCount='countCart'/>
  methods: {
   countCart() {
  this.count  = 1
   }
 }

CodePudding user response：

What you are looking for is a state management. Either define your own reactive object:
https://dev.to/vuesomedev/you-might-not-need-vuex-with-vue-3-52e4
Or use the recommended state management for Vue 3:
https://pinia.vuejs.org/