Vuejs2 将状态存储对象共享给Vue中的子组件（不含Vuex）

我正试图学习如何使用存储模式在Vue组件之间共享状态的教程

在本教程中，它们初始化两个独立的Vue实例：

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

但是我在

组件

文件中使用单独的.vue文件中定义的组件，因此我没有任何地方可以指定

数据

。我无法将其放入

导出默认值

块，因为那里已经有一个

数据（）

条目，例如在我的组件

传单映射.vue中：

<template>
    <!-- ref="map" is required or Leaflet-Draw throws TypeError: "_this.$parent.$parent.$refs.map is undefined"  -->
    <!-- See: https://github.com/hubertokf/vue2-leaflet-draw/issues/1#issuecomment-520572130 -->
  <l-map
      ref="map"
      v-if="showMap"
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-draw-toolbar position="topright"/>
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
    </l-map>
</template>

<script>

import { latLng } from "leaflet";
import { LMap, LTileLayer } from "vue2-leaflet";
import LDrawToolbar from 'vue2-leaflet-draw-toolbar';

export default {
  name: "LeafletMap",
  components: {
    LMap,
    LTileLayer,
    LDrawToolbar
  },
  data() {
    return {
      zoom: 8,
      center: latLng(8.6195, 0.8248),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      currentCenter: latLng(47.41322, -1.219482),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true
    };
  },
  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    }
  }
};
</script>

那么，当子组件按如下方式组织时，如何将此状态存储对象传递给子组件

<template>
  <div id="app">
    <div id="sidebar-container">
      <Sidebar />
    </div>
    <div id="map-container">
      <LeafletMap />
    </div>
  </div>
</template>

<script>
// import LENIInterface from './components/LENIInterface.vue'
import LeafletMap from './components/LeafletMap.vue'
import Sidebar from './components/Sidebar.vue'

export default {
  name: 'xyz',
  components: {
    LeafletMap,
    Sidebar,
  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

// Leaflet tiles are scrambled unless you add this import
// See https://stackoverflow.com/questions/58723390/vue-leaflet-map-tiles-in-wrong-order
import "leaflet/dist/leaflet.css";
// import "./assets/css/main.css";

Vue.config.productionTip = false

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  },
  vuetify,
  render: h => h(App),
}).$mount('#app')