vue mixins的使用

Posted 2021-01-13 leiting

官网传送

刚开始接触vue的时候，官网关于mixins的例子看了好几遍，发现还是不会用，包括vuex也是后来慢慢理解一点的，不过和vuex比起来。mixns还是很好理解，简单很多了

就我目前理解mixns，它就相当于一个中间件，可以把一些公用的函数，方法放到这个中间件，页面调用的时候只需要引入mixns就行，提高重复利用率

以存储城市历史记录为例：

1. 在src目录下新建mixns目录，下面新建文件getHistoryCity.js

export default{
    methods:{
        setCitys(data){

           let searchCity = sessionStorage.getItem(‘CITY_INFO‘);
                if(!searchCity){//如果没有历史记录
                     let option=[];
                     option.push(data);
                     sessionStorage.setItem(storename,JSON.stringify(option));
                }else{
                    let newSearchCity=JSON.parse(searchCity);
                    if(newSearchCity.indexOf(data)==-1){ // 如果数组中没有，就加进去,最多存9条
                        newSearchCity.push(data)
                        if(newSearchCity.length>9){
                            newSearchCity.splice(1,newSearchCity.length)
                        }
                    }
                    sessionStorage.setItem(storename,JSON.stringify(newSearchCity));
                }

       }, 
       getCitys(){ 
　　　　　　return JSON.parse(sessionStorage.getItem(‘CITY_INFO‘)); 
　　　　} 
　　} 

} 

组件或页面里调用 index.vue

<template>
<div class="his_wrap" v-if="historycitys">
          <div class="tit">历史选择城市</div>
          <div class="flex-wrap">
            <div class="his_city" v-for="item in historycitys">{{item}}    
          </div>
          </div>
</div>
</template>

<script>
import historyCityMixin from ‘@/mixins/getHistoryCity‘
export default {
  name:‘index‘,
  mixins:[historyCityMixin],
  data(){
    return{
       historycitys:null
    }
  },
  created(){
    this.historycitys = this.getgetCitys();
  },
  methods:{
    selectCity(item){
       this.setCitys(item)
    }
  }
}
</script>