npm install vue-data --save-dev

import Vue from 'vue'
import vuedata from 'vue-data'
Vue.use(vuedata)

<template>
  <div>
  <!-- 
    每个vue实例中的 g 对象是相互独立的，可以通过调用$vd(key, value)的方式修改并同步到所有实例
     因为每个实例 g 对象相互独立，所以可以把 g 对象和对象中的属性当做普通data里面的属性使用，
     比如watch，computed等。不建议在实例中通过 this.g 的形式对该对象进行修改和删除
  -->
    页面{{g.abc}}
  </div>
</template>
<script>
  export default new window.VueData({
    cache: true, // 是否缓存,表示该VueData对象是需要缓存的，那改vue实例在销毁前将会把data对象缓存起来，
                 //等待下次create该对象的时候直接将缓存data值赋值给新的vue对象。
                 //缓存的页面created 和beforeMount、mounted方法在使用缓存且未被清空该页面缓存的情况下不会调用，
                 //缓存页面beforeCreate会调用
                 //可以通过  beforeCache  和  cached  生命周期方法来执行激活逻辑
                 //如果未设置或者设置为false，但是父组件链中如果是设置了true的话值也为true，
                 //比如，页面设置了缓存，那页面中使用的自定义vue组件也是缓存的
                 //实例.$vd() 来清除该实例和子组件的缓存内容
                 //$vd(viewname, viewtag, '$clearCache')清除指定实例的缓存
    viewname: 'myview', //vuedata实例名称，是为了指定修改数据和指定调用方法的时候定位到具体实例
                        
    data() {
    },
    methods: {
    },
    beforeCache() { // 始终会调用，无论是否是缓存状态
      // TODO
    },
    cached() { // 始终会调用，无论是否是缓存状态
      // TODO
    }
  })
</script>
<style>
</style>

<template>
  <div>
    页面
  </div>
</template>

<script>
  
  export default {
    data() {
    },
    methods: {
      // 修改属性testG的值为abc并同步到其他VueData对象
      //'abc'同样的可以替换成数组或者对象，因为内部实现用到了Vue.set
      this.$vd('testG', 'abc')
      
      // 设置viewname为myview,viewtag为的实例的titles属性为[{text: "关于我们", route: '/about'}]
      this.$vd('myview', 'tag1', 'titles', [{text: "关于我们", route: '/about'}])
      
      // 调用viewname为myview,viewtag为tag1的实例方法 myMethod
      this.$vd('myview', 'tag1', 'myMethod']) // 
    }
  }
</script>

<style>
</style>

<template>
  <div>
    <myview :datas="titles" viewtag="myview1"></myview>
    <myview :datas="titles" viewtag="myview2"></myview>
  </div>
</template>

<template>
  <div>
  <!-- 假设改组件的viewname为 detailview -->
    <detailview :datas="products" :viewtag="mytag"></detailview>
    <!-- 相关商品列表 -->
    <div @click="someLikeFn">商品1</div>
    <div @click="someLikeFn">商品2</div>
  </div>
</template>
<script>
  window._mytag = 1
  export default {
    data() {
      return {
        mytag: 'tag1',
        titles: [],
        products: []
      }
    },
    methods: {
      someLikeFn() {
        this.mytag = 'tag' + (++window._mytag) // 使viewtag同viewname下具有唯一性
        this.$router.push({path: '/product/detail'}) // 详情页面跳到详情页面
      }
    }
  }
</script>

this.$vd('myview', 'myview1', 'titles', [{text: "123", route: '/sdasg'}])
this.$vd('myview', '', 'titles', [{text: "123", route: '/sdasg'}])

this.$vd('detailview', 'tag1', products, [{title: "商品1", content: '内容1'}])
this.$vd('detailview', '', products, [{title: "商品2", content: '内容2'}])

//第三方js文件
VueData.$vd('abc', '123') // 修改全局属性abc的值为123
VueData.$vd('myview', '', 'title', 'hello') // 修改属性
VueData.$vd('myview', '', 'testMethod', 'param1', 'param2', 'param3') // 调用方法