vue从创建到完整的饿了么（8）city.vue布局以及vuex的state属性简单使用

说明

1.上一章--点击事件与页面跳转
2.苍渡大神的源码地址--Github地址
3.UI框架--Mint UI
4.数据接口地址--Github地址
5.下一章--页面图标ico的设置

开始

1.先看一下UI图
图片描述

2.创建
在src文件夹下的page文件夹下新建文件夹city，在city中新建文件city.vue，代码如下图片描述

3.样式
city.vue修改如下

<template>
  <div>
    <mt-header title="天津" class='fs1-2' fixed>
        <mt-button slot="left"><mt-button icon="back"></mt-button></mt-button>
        <mt-button slot="right" class='fs0-8'>切换城市</mt-button>
    </mt-header>

    <div class="mgtop50 padlr10 bgfff padbot10">
      <input class="cityinput" placeholder="输入商务楼，学校，地址"></input>
      <div class="submit bgcol ih40">提交</div>
    </div>

    <div>
      <div class='contenttop fs0-8 padlr10'>搜索历史</div>
    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期


  },
  computed:{
  //计算属性
      
  },
  methods:{
  //函数
    

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cityinput{
  width:100%;
  height:40px;
  margin:10px 0px;
  outline:0px;
  padding:0px 5px;
  box-sizing:border-box;
}
.submit{
  text-align:center;
  color:white;
  border-radius:3px;
}
.fs0-8{
  font-size:0.8rem !important;
}
.contenttop{
  border-top:2px solid #E4E4E4;
  border-bottom:2px solid #E4E4E4;
}
</style>

样式写好了，怎么看到呢？配置路由

4.配置路由
打开src文件夹下的router下的routers.hs文件修改如下
图片描述

打开http://localhost:1999/#/city（确保服务已运行），结果如图
图片描述

5.路由跳转
页面写好了，怎么进入呢？咱先回到home.vue页面
图片描述

这里点击任意一个城市都要跳转页面，先在methods中写点击跳转函数

gocity:function(){
      this.$router.push('city');
    }

然后在每一个需要点击的元素上绑定点击函数

@click='gocity'

home.vue修改后的完整代码如下

<template>
  <div>
    
        <mt-header fixed>
            <span slot="left">elm</span>
            <mt-button @click="gologin" slot="right">登录|注册</mt-button>
        </mt-header>
    

    <div class="padtop40">
      <div class="after ih50 padlr10 box bgfff">
        <span  class="">当前选择城市</span>
        <span  class="right fs0-8 col9f">定位不准时，请在城市列表选择</span>
      </div>
      <mt-cell :title="nowcity.name" class="col after" to="city"  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="热门城市"></mt-cell>
        <div class="itembox ovhid col fs0-8">
          <div @click='gocity' v-for="item in hotcity">{{item.name}}</div>
        </div>        
      </div>         

      <div v-for="(items,index) in getlist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div @click='gocity' class="nowarp col9f fs0-8" v-for="item in items">{{item.name}}</div>
        </div>        
      </div>  

    </div>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
      citylist:"",
      hotcity:"",
      nowcity:""
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      //城市列表
      this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {
        console.log(response);
        this.citylist=response.body;
      }, response => {
        console.log(response);
        
      });
      //热门城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=hot').then(response => {
        console.log(response);
        this.hotcity=response.body;
      }, response => {
        console.log(response);
        
      });
      //定位城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {
        console.log(response);
        this.nowcity=response.body;
      }, response => {
        console.log(response);
        
      });

  },
  computed:{
  //计算属性
      getlist:function(){
        var mycitylist={};
          for(var i=65;i<=90;i++){
            var num= String.fromCharCode(i);
            mycitylist[num]=this.citylist[num];
          }
          return mycitylist
      }
  },
  methods:{
  //函数
    gologin:function(){
      console.log(123);
      this.$router.push('login');
    },
    gocity:function(){
      this.$router.push('city');
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{
  width:25%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-right:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){
  border-right:0px;
}
</style>

注意，这里在当前选择的城市用的是Mint ui的cell组件，有自己的跳转事件，加上to="city"即可
写完后赶紧试试吧（仍旧就不会做动图）

vuex

可能有老铁注意到了，不管我们点哪城市，在city页面显示的都是天津。

图片描述

那我们就需要告诉home.vue我们点击的是哪个城市。但是我们在home.vue操作怎么来通知city.vue结果呢？使用vuex！
1.如果把一个个页面当做一个个独立的函数的话，那vuex就相当于一个全局的变量，在任意一个函数都可以调用。
安装以及vuex插入项目布局等，咱们在第一章创建（包含vuex）已经完成了，在这里咱们直接用。

2.思路
我们要在vuex中创建一个变量来存放当前选择的是哪座城市，在home.vue来改变它，在city中来获取它。

3.创建变量
在src下的store中的index.js文件添加变量nowcity，修改如下（所有的全局变量都添加在state里）

4.改变变量
在home.vue中修改城市点击事件gocity如下

gocity:function(e){
      this.$router.push('city');
      this.$store.state.nowcity = e;
}

$store代表vuex，$store.state代表vuex下的state属性，$store.state.nowcity代表vuex的nowcity变量（这是我目前的认识）
其中e是城市的名字，在点击时传入
在修改绑定点击事件由

 @click='gocity'

改为

@click='gocity(item.name)'

ok,这样在点击时传入城市的名字，在gocity函数中接受城市的名字，然后在vuex的state中修改nowcity。
现在咱们只是修改了城市列表的点击事件，并没有修改定位城市的点击事件。因为定位城市咱们用的是Mint UI 自己的跳转。
那我们就在获取定位城市时就改变默认的nowcity，点击城市列表就改变nowcity,点击定位城市的话就用默认的。获取定位城市的请求修改如下

//定位城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {
        console.log(response);
        this.$store.state.nowcity=response.body.name;
      }, response => {
        console.log(response);
   
      });

然后把home.vue的data里的nowcity删除，咱们现在用vuex里的定位城市变量了。
home.vue里获取定位城市的的html也要改为从vuex获取

<mt-cell  :title="$store.state.nowcity" class="col after" to="city"  is-link  value=""></mt-cell>

home.vue修改后整体代码如下

<template>
  <div>
    
        <mt-header fixed>
            <span slot="left">elm</span>
            <mt-button @click="gologin" slot="right">登录|注册</mt-button>
        </mt-header>
    

    <div class="padtop40">
      <div class="after ih50 padlr10 box bgfff">
        <span  class="">当前选择城市</span>
        <span  class="right fs0-8 col9f">定位不准时，请在城市列表选择</span>
      </div>
      <mt-cell  :title="$store.state.nowcity" class="col after" to="city"  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="热门城市"></mt-cell>
        <div class="itembox ovhid col fs0-8">
          <div @click='gocity(item.name)' v-for="item in hotcity">{{item.name}}</div>
        </div>        
      </div>         

      <div v-for="(items,index) in getlist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div @click='gocity(item.name)' class="nowarp col9f fs0-8" v-for="item in items">{{item.name}}</div>
        </div>        
      </div>  

    </div>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
      citylist:"",
      hotcity:""
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      //城市列表
      this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {
        console.log(response);
        this.citylist=response.body;
      }, response => {
        console.log(response);
        
      });
      //热门城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=hot').then(response => {
        console.log(response);
        this.hotcity=response.body;
      }, response => {
        console.log(response);
        
      });
      //定位城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {
        console.log(response);
        this.$store.state.nowcity=response.body.name;
      }, response => {
        console.log(response);
        
      });

  },
  computed:{
  //计算属性
      getlist:function(){
        var mycitylist={};
          for(var i=65;i<=90;i++){
            var num= String.fromCharCode(i);
            mycitylist[num]=this.citylist[num];
          }
          return mycitylist
      }
  },
  methods:{
  //函数
    gologin:function(){
      console.log(123);
      this.$router.push('login');
    },
    gocity:function(e){
      this.$router.push('city');
      this.$store.state.nowcity = e;
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{
  width:25%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-right:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){
  border-right:0px;
}
</style>

5.city.vue调用
在city.vue的头部获取vuex的nowcity属性

 <mt-header :title="$store.state.nowcity" class='fs1-2' fixed>
        <mt-button slot="left"><mt-button icon="back"></mt-button></mt-button>
        <mt-button slot="right" class='fs0-8'>切换城市</mt-button>
 </mt-header>

ok，代码修改完成，运行试试
图片描述

获取成功！到这，咱们的vuex的state属性就简单使用成功

修改

如果有项目经验丰富的老铁可能已经注意到了，咱们在上面设置vuex的nowcity直接等于城市的名称--当前城市我们在后面肯定还要用很次，而且还要获取当前城市详细信息商家信息等等--所以我们必须把城市的id存进去，不能只存城市的名字。所以我们要把vuex的nowcity从一个字符串改变为一个object对象，包含城市名字和id

1.打开src下的store下的index.js修改如下
图片描述

2.打开home.vue。咱们调用gocity时不能只传name，由

@click='gocity(item.name)'

改为

@click='gocity({name:item.name,id:item.id})'

获取定位城市时也要修改

 //定位城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {
        console.log(response);
        this.$store.state.nowcity={"name":response.body.name,"id":response.body.id};
      }, response => {
        console.log(response);
        
      });

home.vue获取vuex的nowcity也要修改为

<mt-cell  :title="$store.state.nowcity.name" class="col after" to="city"  is-link  value=""></mt-cell>

3.打开city.vue，将头部获取当前城市修改如下

<mt-header :title="$store.state.nowcity.name" class='fs1-2' fixed>
        <mt-button slot="left"><mt-button icon="back"></mt-button></mt-button>
        <mt-button slot="right" class='fs0-8'>切换城市</mt-button>
    </mt-header>

ok,修改成功，运行试试。
图片描述

完美！到这，vuex的state总算了解了一些

vue从创建到完整的饿了么（8）city.vue布局以及vuex的state属性简单使用

说明

开始

vuex

修改

你的前端

引用和评论

vue从创建到完整的饿了么（19）阻止事件冒泡

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue使用mixins

startViewTransition的简单示例

从JavaScript中看设计模式(总结)