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