Vue 数组相关

2020-10-16  本文已影响0人  三月木头

1.如何对数组进行插入或删除
splice

  1. Vue数组中存对象
 private collectArray:any[] = [
      {name:'BTCUSD',collected:true},
      {name:'ETHUSD',collected:true},
      {name:'EOSUSD',collected:true},
      {name:'LINKUSD',collected:true},
      {name:'TRXUSD',collected:true},
      {name:'DOTUSD',collected:true}
    ];
  1. 关于绑定方法,方法里面传递对象数据
<div v-on:click.stop="clickStarParass(collectItem)" :key="collectItem" class="all_collect_star">
  1. js中数组如何进行遍历
let collectArray = new Array();
this.collectArray.map(item => {
      if(item.collected) {
        var symbol = "X" + item.name;
        this.$store.commit('updateCollectSymbol',symbol);
        collectArray.push(symbol);
      }
    });
  1. Js的语言特点
    数据特点,不需要声明任何属性,可以直接拿来用。

  2. Vue 是数据驱动,为啥localStorage.getItem 数据变化不能自动更新Dom
    数据驱动 也就是 数据变化Dom会相应变化,但是这是基于内存状态,如果数据存储在磁盘那么就不行了。存入磁盘的数据是不能不停的读取的。
    我们需要做的是在vue 的 store 层面的modules层面做处理

export default {

  state: {
    isShowDefaultCollectInfo: localStorage.getItem('hideFirstShowCollect') == 'true' ? true: false
  },

  mutations: {
    setHomeIsShowDefaultCollectInfo(state:any, isShowDefault:boolean) {
       state.isShowDefaultCollectInfo = isShowDefault;
       localStorage.setItem('hideFirstShowCollect',isShowDefault.toString())
     }
  }

  getters: {
    homeIsShowDefaultCollectInfo(state:any) {
      return state.isShowDefaultCollectInfo;
    }
  }

}

用法:

//保存首次 自选 展示记录
  saveCollectInfo(value:string) {
    this.$store.commit("setHomeIsShowDefaultCollectInfo", value == 'true'? true: false);
  }

//获取是否展示 自选 展示记录
  get getCollectInfo():any {
    return this.$store.getters.homeIsShowDefaultCollectInfo;
  }
上一篇 下一篇

猜你喜欢

热点阅读