Vue 非親子間のデータのやりとり

Question

Vueに関する質問です。

#ComponentA
#ComponentB

上記があるとして、AでのクリックイベントをBで検知したいという想定です。
二つが親子関係ならpropsやemitを使うのですが、今回の場合は違います。

こういう場合、vuexを使う以外で、何か変更検知する方法はあるのでしょうか？
template入らず、データだけを渡したいのです。

まだvueを触ってから日が浅いので無知な質問かもですが、よろしくお願いします。

Answer 1

Vuexを使わないやり方以外ですと下記がございます。

1. （Vue3の場合）provide injectを用いる

下記に詳細のドキュメントがございますが、
provide と injectを用いることでvuexと同等の状態管理を実現できます。
https://v3.ja.vuejs.org/guide/component-provide-inject.html

1. （Vue2の場合）vue.observableを用いる

vuw2.6.0以上であれば下記のような形でvue.observableを用いて実現可能です。

store.js

import Vue from "vue"
const state = Vue.observable({ counter: 0 })
export const increment = () => state.counter++
export const decrement = () => state.counter--
export default state

vueのコンポーネント

<template>
  <div>
    <p>The counter value is {{counter}}</p>
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>
<script>
  import store, { increment, decrement } from "./store";
  export default {
    computed: {
      counter() {
        return store.counter;
      }
    }, 
    methods: {
      inc() {
        increment();
      },
      dec() {
        decrement();
      }
    }
  };
</script>

Comments

[yokuwakaran]

ありがとうございます。解決しました。