zoukankan      html  css  js  c++  java
  • mpvue 无法获取$store的问题

    在开发的时候,我们喜欢将一些公共的方法,属性,放在一个特定的位置,例如在mpvue开发小程序的时候,

    我们将其放在 vue提供的store里面,或者在mainjs中通过Vue.prototype.xxx=xxxxxxxxxx在Vue的原型上扩展属性或方法。

    经过发现:我们使用store的时候,习惯将Vue.$prototype.store = store,问题就出在这里,小程序中:在每一个页面的template部分,采用{{$store.state.xx}}在界面上不会有任何呈现,但是在H5中显示是正常的,

    说明mpvue在编译的过程中可能没有在对应的小程序的页面上解析this.$store,但是在数据层(js上),我们如果采用 this.aa = this.$store.state.xxx是可以正确访问和赋值的(这点比较重要),aa放在页面上也没有问题,但是这样的就失去了 ‘全局’的意义;

    由于 this.aa = this.$store.state.xxx是一次性赋值,对于常量这类非引用类型,  在下一次 this.$store.state.xxx发生变化的话,我们将无法触发this.aa的更新!! 需要手动再次赋值,所以很麻烦。

    解决办法:1,针对于页面不多的情况下,每个页面引用store;

                      2,上述可能麻烦,为了促发数据层的更新。我们可以采用computed,在mainjs中声明一个mixin(不会mixin的同学们请参看https://cn.vuejs.org/v2/api/#Vue-mixin);

                            computed会在内部的 store更新(首先是因为上述的这句(在数据层,我们如果采用 this.aa = this.$store.state.xxx是可以正确访问和赋值的))

                              代码如下:

    import store from './store'
    Vue.prototype.$store = store;
    
    Vue.mixin({
       computed: {
                    network: function() {
                return this.$store.state.network;
                    },
         }
    })

      那么我们就可以在任何一个页面间接的使用store了,在A页面改变store中的值,那么B页面上也能及时得到改变。

                                 

  • 相关阅读:
    如何学习一项新技术呢?
    开发人员如何构建自己的学习笔记系统
    Stream流之List、Integer[]、int[]相互转化
    图解LinkedHashMap原理
    java 手动实现单链表(尾插法和头插法)
    为什么你学不会递归?刷题几个月,告别递归,谈谈我的经验
    谈谈限流算法的几种实现
    使用LinkedHashMap实现一个简易的LRU缓存
    Java深拷贝和浅拷贝
    Excel两列求差集和并集的实现
  • 原文地址:https://www.cnblogs.com/tony-stark/p/11694882.html
Copyright © 2011-2022 走看看