Vuejs2.0构建一个彩票查询WebAPP(2)

一，Vuex的使用

 import Vue from 'vue'
 import Vuex from 'vuex'
 import MsgModules from './MsgModules'
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
     msg: MsgModules
   }
 })

 export default{
   state: {
     CheckedMenu: '', //菜单选中变量
     CheckedLottoryHistory: [] //彩票历史变量
   },
   mutations: {
     setCheckedMenu (state, index) {
       state.CheckedMenu = index
     },
     setHistory (state, arr) {
       state.CheckedLottoryHistory = arr
     }
   },
   getters: {
   },
   actions: {
   }
 }

 

state中声明各种状态变量，使用方法this.$store.state.msg.xx

mutations中对state中状态做同步修改this.$store.commit("xx",obj),只能有一个obj参数

getters中为获取状态变量的方法this.$store.getters.xx

actions中可以支持异步操作状态变量this.$store.dispatch("xx",obj)

 

vuex.store使用modules可以统筹多个状态管理文件，使业务分离，便于维护

 

二，Vue核心，组件的编写

 <template>
   <div>
     <div class="nav">
       <div class="channel">
         <ul>
           <li v-for="(menu,index) in menulist" :key="index">
             <LinkBtn :title="menu.DESCR" :index="index"></LinkBtn>
           </li>
         </ul>
       </div>
     </div>
     <ul class="newsContent" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
       <li class="section" v-for="(item, index) in types" :key="index">
         <LastIssueItem :code="item" :name="categorys.CAI[item].DESCR"></LastIssueItem>
       </li>
       </ul>
   </div>
 </template>

 <script>
 import { Indicator } from 'mint-ui'
 import LinkBtn from '@/components/LinkBtn'
 import LastIssueItem from '@/components/LastIssueItem'
 export default {
   data () {
     return {
       busy: false,
       categorys: {},
       menulist: [],
       types: []
     }
   },
   mounted () {
     this.$myaxios.get('http://misc.opencai.net/consts/lotts.json') // 使用自定义的axios来做ajax操作
       .then((response) => {
         if (response.data) {
           this.categorys = response.data
           this.menulist = response.data.GRP.C // 菜单数据
           let firstKey = Object.keys(this.menulist)[0] // 第一个菜单的关键字
           this.$store.commit('setCheckedMenu', firstKey) // 设置第一个菜单被选中，状态提交至vuex的状态管理器中
           this.types = this.menulist[firstKey].CODES // 第一个菜单下的各类彩票编码集合
         }
       })
   },
   watch: {
     CheckedMenu: { /* 监听菜单是否切换 */
       handler (newValue, oldValue) {
         let self = this
         self.busy = true
         setTimeout(() => {
           if (self && !self._isDestroyed) {
             // 菜单发生切换之后，从集合中获取新的大类下的彩票类别10条
             self.types = self.menulist[newValue].CODES.slice(0, 10)
             self.busy = false
           }
         }, 500)
       },
       deep: true
     },
     busy (newValue, oldValue) {
       if (newValue) {
         Indicator.open({text: '加载中...', spinnerType: 'fading-circle'})
       } else {
         Indicator.close()
       }
     }
   },
   components: {
     LinkBtn,
     LastIssueItem
   },
   computed: {
     CheckedMenu () {
       scrollTo(0, 0)
       // 获取Vuex状态管理器中的选中菜单，如果状态管理器中菜单值发生改变，此处的计算属性也会发生改变
       return this.$store.state.msg.CheckedMenu
     }
   },
   methods: {
     loadMore () {
       let i = this.types.length
       if (i > 0) {
         // 加载更多时，从某大类下获取所有彩票类型编码
         let childs = this.menulist[this.CheckedMenu].CODES
         // 如果大类下的彩票编码数量大于当前彩票编码数量则可以加载更多
         if (childs.length > i) {
           this.busy = true
           // 从大类下的彩票编码集合中截取更多10条加入当前彩票编码集合
           let array = childs.slice(i, i + 10)
           for (var j = 0; j < array.length; j++) {
             this.types.push(array[j])
           }
           this.busy = false
         }
       }
     }
   }
 }
 </script>

 <style lang="css" scoped>
 .nav {
   width: 100%;
   height: .96rem;
   background-color: #f4f5f6;
   display: flex;
   position: fixed;
   z-index: 99;
 }
 .channel {
   display: inline-block;
   flex: 1;
   white-space: nowrap;
   display: flex;
   align-items: center;
   overflow-x: scroll;
   font-size: .30rem;
   color: #4b4949;
 }
 .channel::-webkit-scrollbar {
   height: 0;
 }
 .channel ul li {
   display: inline-block;
 }
 .newsContent {
   padding-top: 0.96rem;
 }
 .section {
   width: 100%;
   height: 2.24rem;
   border-bottom:1px solid #ccc;
 }
 </style>

可以看到组件中引入了两个自定义的组件，横向大类菜单和纵向各类彩票最新一期的信息。使用了Mint-UI中的Infinite scroll来做无限滚动加载，Indicator来做loading。唯一的操作“菜单切换”使用vuex来做状态管理。最终效果如下图

列表的子项组件，当传入某彩票编码时，获取彩票的数据

 <template lang="html">
   <div class="news" @click="toDetail">
     <div class="p">
         <span class="s1">{{name}}</span>
         <span class="s2">第{{Detail&&Detail.expect||""}}期</span>
         <span class="s3">
           <span style=" color:grey;">开奖：</span>
           <span v-if="Detail.hasOwnProperty('opentime')&&Detail.opentime">
             {{(new Date(Detail.opentime)).toLocaleDateString()}}
           </span>
         </span>
     </div>
     <div class="p">
         <span v-for="(value, index) in RedBall" class="ball1" :key="'Red'+index">
           <span class="word">
             {{value}}
           </span>
         </span>
         <span v-for="(value, index) in BlueBall" class="ball2" :key="'Blue'+index">
          <span class="word">
             {{value}}
           </span>
         </span>
     </div>
   </div>
 </template>

 <script>
 export default {
   data () {
     return {
       List: [],
       Detail: {},
       RedBall: [],
       BlueBall: []
     }
   },
   props: ['code', 'name'],
   mounted () {
     // 此处根据传过来的彩票代码获取彩票最新的数据
     this.$myaxios.get('/myapi/' + this.code + '-20.json')
       .then((response) => {
         if (response.data.rows > 0) {
           // 某类彩票的最近20条数据
           this.List = response.data.data
           // 某类彩票的最近一条数据
           this.Detail = response.data.data[0]
           // 彩票数据的数字码
           if (this.Detail.hasOwnProperty('opencode') && this.Detail.opencode) {
             let arr = this.Detail.opencode.split('+')
             if (arr.length > 0) {
               if (arr[0]) {
                 this.RedBall = arr[0].split(',')
               }
               if (arr[1]) {
                 this.BlueBall = arr[1].split(',')
               }
             } else {
               this.RedBall = this.Detail.opencode.split(',')
             }
           }
         }
       })
   },
   methods: {
     toDetail () {
       // 点击时，将某彩票的历史数据传递给Vuex的状态管理器。然后在历史页中直接获取这些历史数据并呈现
       this.$store.commit('setHistory', this.List)
       this.$router.push({path: '/history', query: { name: this.name }})
     }
   },
   computed: {
   }
 }
 </script>

 <style lang="css" scoped>
 .news {
   height: 2.24rem;
   box-sizing: border-box;
   width: 100%;
   padding: 0.01rem;
 }
 .p{
   height: 1.12rem;
   line-height: 1.12rem;
   padding-left: .1rem;
   padding-right: .1rem;
   vertical-align:middle;
   width: 100%;
   display:inline-block;
 }
 .s1{
   color:blue;
   width: 30%;
   padding:2px;
 }
 .s2{
   padding-left:2px;
   padding-right: 2px;
 }
 .ball1{
   border-radius: 50%;
   height: 20px;
   width: 20px;
   display: inline-block;
   background: #f54646;
   vertical-align: top;
 }
 .ball2{
   border-radius: 50%;
   height: 20px;
   width: 20px;
   display: inline-block;
   background: #39f;
   vertical-align: top;
 }
 .word{
 display: block;
 color: #FFFFFF;
 height: 20px;
 line-height: 20px;
 text-align:center;
 }
 </style>

三，路由设置

 import Vue from 'vue'
 import Router from 'vue-router'
 import index from '@/pages/index'
 import history from '@/pages/history'

 Vue.use(Router)

 export default new Router({
   mode: 'history',
   routes: [
     {
       path: '/',
       component: index
     },
     {
       path: '/history',
       component: history
     }
   ],
   scrollBehavior (to, from, savedPosition) {
     return { x: 0, y: 0 }
   }
 })

四，工程的入口main.js，引入各种包和声明全局变量

 import Vue from 'vue'
 import App from './App'
 import axios from 'axios'
 import router from './router'
 import store from './store/'
 import MintUI from 'mint-ui'
 import 'mint-ui/lib/style.css'
 Vue.use(MintUI)

 Vue.config.productionTip = false
 axios.default.timeout = 5000
 Vue.prototype.$myaxios = axios

 /* eslint-disable no-new */
 let vm = new Vue({
   el: '#app',
   router,
   store,
   template: '<App/>',
   components: { App }
 })
 console.log(vm)

Vuejs2.0构建一个彩票查询WebAPP(1)

Vuejs2.0构建一个彩票查询WebAPP(2)

Vuejs2.0构建一个彩票查询WebAPP(3)