vue mixins的使用

官网传送

刚开始接触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>