mpvue实现微信小程序样式切换以及本地缓存

功能描述：

在页面A的添加应用中点击”添加“，跳转到展示所有应用的页面B，通过点击开关，在页面A中展示所开启的应用

效果展示：

代码：

页面B代码：

 <div class="itembox" v-for="(item,index) in appinfo" :key="index">
          <div class="boxhead">
            <img :src="item.imgsrc">
            <div class="time">
              <h3>{{item.appname}}</h3>
              <span>{{item.appintro}}</span>
            </div>
            <span class="stutas" :class="{'offbtn':item.btnlock}" @click="toBs(index)">{{item.btntxt}}</span>
          </div>
        </div>

页面Bjs代码： 

 toBs(index){
      //切换开发样式
      this.appinfo[index].btnlock=!this.appinfo[index].btnlock
      if(this.appinfo[index].btnlock == true){
        this.appinfo[index].btntxt = "未启用"
        //setappArr.splice(this.appinfo[index],1);
        for (var i = 0; i < setappArr.length; i++) {
            if (setappArr[i] == this.appinfo[index]) {
                setappArr.splice(i, 1);
                break;
            }
        }
         wx.setStorage({
          key: 'apply',  //key为存储的名字  可自行定义  但是注意获取时也要用这个名字
          data: setappArr  //要存储的数据
        })
      }else{
        this.appinfo[index].btntxt = "已启用"
        setappArr.push(this.appinfo[index])
        wx.setStorage({
          key: 'apply',  //key为存储的名字  可自行定义  但是注意获取时也要用这个名字
          data: setappArr  //要存储的数据
        })
      }
    }

页面A中

onShow(){
    var _this = this
    wx.getStorage({
      key: 'apply',
      success (res) {
        _this.appinfo = res.data
        console.log(res.data)
      }
  })
  }

代码