관련 없는 구성 요소 간의 Vue 통신

관련 없는 구성 요소 간의 Vue 통신

App.js에서 렌더링하는 navbar 구성 요소가 있습니다.다른 페이지에 빠른 추가 버튼이 있는 제품 카드가 있습니다.제품 카드에서 제품을 추가할 때마다 카운트가 증가하는 카트 아이콘을 네비게이션 바에 추가하고 싶습니다.하지만 그들은 부모나 형제자매가 아니기 때문에 제품 카드에서 여기 있는 내비게이션 바로 데이터를 전달하는 방법에 대해 잘 모르겠습니다.어떤 예든 정말 도움이 될 것입니다.

여기 피니아와 같은 솔루션이 있습니다.

const { createApp, ref } = Vue
const { createPinia, defineStore, storeToRefs } = Pinia

const useStore = defineStore('currentDocument', 
{
  state: () => {
    return {
      counter: 0
    }
  },
  actions: {
   add() { this.$state.counter++ }
  }
})

const Basket = {
  setup() {
    const store = useStore()
    const { counter } = storeToRefs(store)  
    return {
      store,
      counter
    }
  },
  template: 'counter = {{counter}}&nbsp;<button @click="store.add()">+1</button>' 
}

const App = {
  components: { Basket },
  setup() {
    const store = useStore()
    const { counter } = storeToRefs(store)  
  return {
      store,
      counter
    }
  }
}

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
  Basket: <basket></basket><br/>
  App: counter = {{counter}}&nbsp; <button @click="store.add()">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.30/dist/pinia.iife.js"></script>

이곳은 맞춤 매장이 있는 놀이터입니다.

반응 변수를 전달하는 방법...이라는 답변도 확인하십시오.상세한 것은

const { createApp, ref, toRef, toRefs } = Vue;

const myStore = {
  counter: ref(0),
  add: function() {
    this.counter++ 
  }   
}

const Basket = {
  setup() {
    const { counter, add } = myStore
    return  { counter, add }
  },
  template: 'counter = {{counter}}&nbsp;<button @click="add()">+1</button>' 
}

const App = {
  components: { Basket },
  setup() {
    const { counter, add } = myStore
    return  { counter, add }
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
  Basket: <basket></basket><br/>
  App: counter = {{counter}}&nbsp; <button @click="add()">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

언급URL : https://stackoverflow.com/questions/75668566/vue-communicate-between-unrelated-components