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

时间  2019-11-08
标签 vue 建立 完整 饿了 city.vue city 布局 以及 vuex state 属性 简单 使用 繁體版
原文   原文链接

说明

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

开始

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

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

3.样式
city.vue修改以下git

<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>

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

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

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

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总算了解了一些

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程