实现首页和搜索结果页的数据共享，以及点击之后数据传递且跳转

首先创建city-vuex分支

git pull

git checkout city-vuex

npm run start

如何实现，点击搜索结果页的条例，可以把数据传递到首页呢，这就需要首页和城市页，需要一些数据要分享了，城市选择页的数据如何传递给首页呢

City.vue文件和Home.vue文件没有一个公用的父级组件的，如何进行数据传递呢，vue官方提供了一个工具vuex，这是一个数据框架，在一个大型项目之中，vue只能承担视图层的内容，而涉及到大量数据的时候，就要需要一个数据框架进行辅助。

把公用的数据放到一个公共空间去存储，某一个组件改变了公共数据，其他的组件就能感知到也会改变，vuex就是一个公共的存储空间，story

公用数据都存放在stata里，组件想用公用数据，直接调用就可以了。如果想改变State里的数据，就要把一些异步操作放在Action里。组件调用Actions，紧接着，aCTions调用Mutations,Mutations里放的是一个一个的同步的对stata的修改。

组件改数据必须先调用actions,做一些异步处理，然后cations嗲用NMutations,再改变state里的值，有时也可以直接略过Actions,直接组件调用Mutations。

首先安装 cd 到文件夹，输入npm install vuex --save

第二步在src 目录下新建一个store文件夹，在里面新建一个index.js文件夹

第二步在main。js里引入这个文件

回到Home.vue，然后原先数据是通过ajax获取的，现在要删除

现在city是前端存储的，不需要后端你告诉我，所以在data里删了city

header。vue里city也不是由父组件传输的

同时删了props里city变量。

header区北京又被渲染了。

然后修改List.vue

<div class="button-wrapper">
  <!--<div class="button border-bottom">北京</div>-->
  <div class="button border-bottom">{{this.$store.state.city}}</div>
</div>

点击热门城市的时候，也能给传送到首页的header.vue如何做呢

第一步添加click事件

第二步

生命周期函数写在最下面

在index.js里要声明actions组件

可以正确打印出，但是还要创建Mutations组件

实现输入地名，点击搜索结果列表项 数据的传输（公共数据的改变）

在search.vue里添加方法

如何实现点击搜索列表 进入首页，而且地址数据传递到首页

router.push方法用来跳转

在search.vue里 当点击之后，添加 this。$router。push（‘/’）,意思是跳转到首页

在list，vue里也添加折磨一句啊话

但是页面刷新之后，原先选中的城市会被上海代替，不能记住原先选择的是什么，如何改进呢

localstorage是api

1.

为了兼容浏览器需要些try () catch（）来规范代码

刷新之后也没有更改地址

下面 优化代码