在开发的时候,咱们喜欢将一些公共的方法,属性,放在一个特定的位置,例如在mpvue开发小程序的时候,vue
咱们将其放在 vue提供的store里面,或者在mainjs中经过Vue.prototype.xxx=xxxxxxxxxx在Vue的原型上扩展属性或方法。小程序
通过发现:咱们使用store的时候,习惯将Vue.$prototype.store = store,问题就出在这里,小程序中:在每个页面的template部分,采用{{$store.state.xx}}在界面上不会有任何呈现,可是在H5中显示是正常的,api
说明mpvue在编译的过程当中可能没有在对应的小程序的页面上解析this.$store,可是在数据层(js上),咱们若是采用 this.aa = this.$store.state.xxx是能够正确访问和赋值的(这点比较重要),aa放在页面上也没有问题,可是这样的就失去了 ‘全局’的意义;this
因为 this.aa = this.$store.state.xxx是一次性赋值,对于常量这类非引用类型, 在下一次 this.$store.state.xxx发生变化的话,咱们将没法触发this.aa的更新!! 须要手动再次赋值,因此很麻烦。spa
解决办法:1,针对于页面很少的状况下,每一个页面引用store;.net
2,上述可能麻烦,为了促发数据层的更新。咱们能够采用computed,在mainjs中声明一个mixin(不会mixin的同窗们请参看https://cn.vuejs.org/v2/api/#Vue-mixin);prototype
computed会在内部的 store更新(首先是由于上述的这句(在数据层,咱们若是采用 this.aa = this.$store.state.xxx是能够正确访问和赋值的))code
代码以下:blog
import store from './store' Vue.prototype.$store = store; Vue.mixin({ computed: { network: function() { return this.$store.state.network; }, } })
那么咱们就能够在任何一个页面间接的使用store了,在A页面改变store中的值,那么B页面上也能及时获得改变。开发