Vue组件中如何实现数据的共享和传递

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    count: 0  },  mutations: {    increment(state) {      state.count++    }  }})// App.vue<template>  <div>    <h1>{{ count }}</h1>    <button @click="increment">Increment</button>  </div></template><script>export default {  computed: {    count() {      return this.$store.state.count    }  },  methods: {    increment() {      this.$store.commit('increment')    }  }}</script>

// App.vue<template>  <div>    <h1>{{ count }}</h1>    <button @click="increment">Increment</button>  </div></template><script>export default {  data() {    return {      count: 0    }  },  provide() {    return {      count: this.count,      increment: this.increment    }  },  methods: {    increment() {      this.count++    }  }}</script>// Child.vue<template>  <div>    <h2>{{ count }}</h2>    <button @click="increment">Increment in Child</button>  </div></template><script>export default {  inject: ['count', 'increment']}</script>

// Parent.vue<template>  <div>    <h1>{{ message }}</h1>    <Child :message="message" />  </div></template><script>import Child from './Child.vue'export default {  data() {    return {      message: 'Hello Vue!'    }  },  components: {    Child  }}</script>// Child.vue<template>  <div>    <h2>{{ message }}</h2>  </div></template><script>export default {  props: ['message']}</script>