知识点
参数传递
1.父组件给子组件传递参数
子组件head.vue:
{{headTitle}}
export default{
data(){
return{};
},
props:["headTitle","goBack"]
}引用组件city.vue:
切换城市
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组件传递：
根据cityid获取当前城市名字的请求方法：
//传入参数number(就是cityid的值)，根据这个值请求数据
export const currentcity=number=>fetch('/v1/cities/'+number)2.根据输入框的值，展示搜索列表
展示区域分为3部分，一个输入框、一个确认按钮、展示搜索列表区域
所需参数：输入框的值、请求数据的方法、提交的方法
template部分：
......
- {
//返回值是具体的地址信息
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参考