vue2-elm学习记录（Day2）

知识点

参数传递

1.父组件给子组件传递参数

子组件head.vue:

<header id="head_top">
    <!--返回上一级，是否有，有父组件传递过来的goback参数决定-->
    <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2" />
      </svg>
    </section>
    <!--title s   是否显示标题由父组件是否传递headTitle参数有关-->
    <section class="title_head ellipsis" v-if="headTitle">
        <span class="title_text">
            {{headTitle}}
        </span>
    </section>
    <!--title e-->
</header>

export default{
    data(){
        return{};
    },
    props:["headTitle","goBack"]
}

引用组件city.vue:

<div class="city_container">
    <!--go-back、cityname是传递给子组件的参数-->
    <head-top :head-title="cityname" go-back="true">
        <router-link to="/home" slot="changecity" class="change_city">
            切换城市
        </router-link>
    </head-top>
</div>

import headTop from "../../components/header/head";
import {currentcity} from "../../service/getData";
export default{
    data(){
        return{
            //当前城市的名字，应该是从home首页点击的元素传递进来的
            cityname:""
        }
    },
    mounted(){
        //根据传递过来的cityid来获得当前城市的名字
        this.cityid=this.$route.params.cityid;
        //获取当前城市的名字
        currentcity(this.cityid).then(res=>{
            this.cityname=res.name;
        })
    
    },
    components:{
        headTop
    }

}

cityid来源：
路由配置：

export default new Router({
    routes:[
        {
         //当前城市列表页面
         path:'/city/:cityid',
         component:city
        }
    ]
})

home组件传递：

<router-link :to="'/city/'+guessCityid" class="guess_city">

</router-link>

根据cityid获取当前城市名字的请求方法：
//传入参数number(就是cityid的值)，根据这个值请求数据

export const currentcity=number=>fetch('/v1/cities/'+number)

2.根据输入框的值，展示搜索列表

展示区域分为3部分，一个输入框、一个确认按钮、展示搜索列表区域
所需参数：输入框的值、请求数据的方法、提交的方法
template部分：

    <form class="city_form" v-on:submit.prevent>
        <!--搜索框-->
        <div>
            <input type="search" name="city"
             placeholder="输入学校、商务楼、地址"
             required v-model="inputValue" />
        </div>
        <!--确认按钮-->
        <div>
            <input type="submit" name="submit" 
            @click="postpois" value=""提交/>
        </div>
    </form>
    ......
    <!---搜索结果展示区域--->
    <ul>
        <li v-for="(item,index) in placeList" :key="index>
            <h4>{{item.name}}</h4>
            <p>{{item.address}}</p>
        </li>
    </ul>
    

JS部分：

//引入获取具体地址列表的请求方法
import {searchplace} from '../../service/getData';
export default{
    data(){
        return{
            //当前城市的名字，由cityid请求获得
            cityname:"",
            //搜索地址，输入框输入的值
            inputValue:"",
            //当前城市id
            cityid:"",
            //搜索城市列表
            placeList:[]
        }
    },
    methods:{
        //发送搜索信息inputValue
        if(this.inputValue){
            searchplace(this.cityid,this.inputValue).then(res=>{
                //返回值是具体的地址信息
                this.placeList=res;
            
            })
        }
    
    }
}

searchplace方法需要传递两个参数：当前城市id，输入框的输入值

    export const searchplace=(cityid,value)=>fetch('/v1/pois',{
        type:'search',
        city_id:cityid,
        keyword:value
    })

实现效果如下：

3.store状态管理

vuex的思想

当我们在页面上点击一个按钮，它会触发(dispatch)一个action,action随后会执行(commit)一个mutation,mutation立即改变state,state改变以后，我们的页面会state获取数据，页面发生变化

状态管理5和核心，分别是state、getter、mutation、action以及module

state:单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等，在vue.js的组件中才能获取你定义的这个对象的状态
getter:getter类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter,getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter的依赖发生改变才会被重新计算。
mutation:更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个会滴函数。要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit
action:action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。

3.store状态管理

点击搜索列表具体某一项的时候，判断是否存在这一项的历史记录，若没有，则新增，若有则不做重复存储，判断完成后进入下一页
历史记录的展示区域及搜索城市列表的区域
首先：
初始化的时候先判断有没有历史记录，有则placeList的内容默认为历史记录中存的数据，没有的话，placeList的值为空，进行搜索数据请求之后，placeList才会有值
其次
需要在有历史记录的前提下，若当前点击的内容，在历史记录列表中已经存在了，就不在重复存储，若不存在，则在历史记录列表中新增一项
没有历史记录，进行新增。
然后进行存储
需要遇到封装的方法：getStore,setStore,removeStore
JS部分

export default{
    data(){
        //搜索城市列表（搜索的历史记录列表）---->展示
        placeList:[],
        //搜索无结果，显示的提示信息
        placeNone:false,
        //历史搜索记录
        placeHistory
    
    },
    mounted(){
        ....
        //获取到城市名字之后，获取搜索的历史记录
        this.initData();
    },
    methods:{
        initData(){
            //获取搜索历史记录
            //若有搜索记录，那么城市显示列表placeList的值就是搜索历史记录的数据
            //若没有搜索记录，那么显示列表placeList的初始值就为空
            if(getStore('placeHistory')){
                //JSON.parse() 方法将数据转换为JavaScript 对象。
                this.placeList=JSON.parse(getStore("placeHistory"));
            }
            else{
                this.placeList=[];
            }
        },
        /* 
            点击搜索结果进入下一页时进行判断是否已经有一样的历史记录
            如果没有则新增，如果有则不做重复存储，判断完成进入下一页
        
        */
        nextpage(index,geohash){
            //是否有无历史记录的标志
            let history=getStore("placeHistory");
            //当前点击地址
            let choosePlace=this.placeList[index];
            if(history){
                //有记录的情况需要判断是否重复
                let checkrepeat=false;
                // 已村塾的列表信息中是否存在当前点击项
                this.placeHistory=JSON.parse(history);
                this.placeHistory.forEach(item=>{
                    if(item.geohash==geohash){
                          checkrepeat=true;
                    }
                })
                //若没重复
                if(!checkrepeat){
                    this.placeHistory.push(choosePlace);
                }
            
            }
            else{
                //没有。在搜索历史记录的数组中push进当前点击项
                this.placeHistory.push(choosePlace);
            }
            //存储数据
            setStore("placeHistory",this.placeHistoay);
            //完成存储后跳转到下一个页面
            //geohash为当前点击元素的位置坐标
            this.$router.push({path:'/msite',query:{geohash}});
        
        }
    
    }
}

4.执行顺序

beforeCreate:创建前
created:创建完成
beforeMount:挂载前
mounted:挂载完成
beforeUpdate:即将更新渲染
updated:更新成功
Demo学习链接:vue-eleDemo参考