一，Vuex的使用
1 import Vue from ‘vue‘ 2 import Vuex from ‘vuex‘ 3 import MsgModules from ‘./MsgModules‘ 4 Vue.use(Vuex) 5 export default new Vuex.Store({ 6 modules: { 7 msg: MsgModules 8 } 9 })
1 export default{ 2 state: { 3 CheckedMenu: ‘‘, //菜单选中变量 4 CheckedLottoryHistory: [] //彩票历史变量 5 }, 6 mutations: { 7 setCheckedMenu (state, index) { 8 state.CheckedMenu = index 9 }, 10 setHistory (state, arr) { 11 state.CheckedLottoryHistory = arr 12 } 13 }, 14 getters: { 15 }, 16 actions: { 17 } 18 }
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核心，组件的编写
1 <template> 2 <div> 3 <div class="nav"> 4 <div class="channel"> 5 <ul> 6 <li v-for="(menu,index) in menulist" :key="index"> 7 <LinkBtn :title="menu.DESCR" :index="index"></LinkBtn> 8 </li> 9 </ul> 10 </div> 11 </div> 12 <ul class="newsContent" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> 13 <li class="section" v-for="(item, index) in types" :key="index"> 14 <LastIssueItem :code="item" :name="categorys.CAI[item].DESCR"></LastIssueItem> 15 </li> 16 </ul> 17 </div> 18 </template> 19 20 <script> 21 import { Indicator } from ‘mint-ui‘ 22 import LinkBtn from ‘@/components/LinkBtn‘ 23 import LastIssueItem from ‘@/components/LastIssueItem‘ 24 export default { 25 data () { 26 return { 27 busy: false, 28 categorys: {}, 29 menulist: [], 30 types: [] 31 } 32 }, 33 mounted () { 34 this.$myaxios.get(‘http://misc.opencai.net/consts/lotts.json‘) // 使用自定义的axios来做ajax操作 35 .then((response) => { 36 if (response.data) { 37 this.categorys = response.data 38 this.menulist = response.data.GRP.C // 菜单数据 39 let firstKey = Object.keys(this.menulist)[0] // 第一个菜单的关键字 40 this.$store.commit(‘setCheckedMenu‘, firstKey) // 设置第一个菜单被选中，状态提交至vuex的状态管理器中 41 this.types = this.menulist[firstKey].CODES // 第一个菜单下的各类彩票编码集合 42 } 43 }) 44 }, 45 watch: { 46 CheckedMenu: { /* 监听菜单是否切换 */ 47 handler (newValue, oldValue) { 48 let self = this 49 self.busy = true 50 setTimeout(() => { 51 if (self && !self._isDestroyed) { 52 // 菜单发生切换之后，从集合中获取新的大类下的彩票类别10条 53 self.types = self.menulist[newValue].CODES.slice(0, 10) 54 self.busy = false 55 } 56 }, 500) 57 }, 58 deep: true 59 }, 60 busy (newValue, oldValue) { 61 if (newValue) { 62 Indicator.open({text: ‘加载中...‘, spinnerType: ‘fading-circle‘}) 63 } else { 64 Indicator.close() 65 } 66 } 67 }, 68 components: { 69 LinkBtn, 70 LastIssueItem 71 }, 72 computed: { 73 CheckedMenu () { 74 scrollTo(0, 0) 75 // 获取Vuex状态管理器中的选中菜单，如果状态管理器中菜单值发生改变，此处的计算属性也会发生改变 76 return this.$store.state.msg.CheckedMenu 77 } 78 }, 79 methods: { 80 loadMore () { 81 let i = this.types.length 82 if (i > 0) { 83 // 加载更多时，从某大类下获取所有彩票类型编码 84 let childs = this.menulist[this.CheckedMenu].CODES 85 // 如果大类下的彩票编码数量大于当前彩票编码数量则可以加载更多 86 if (childs.length > i) { 87 this.busy = true 88 // 从大类下的彩票编码集合中截取更多10条加入当前彩票编码集合 89 let array = childs.slice(i, i + 10) 90 for (var j = 0; j < array.length; j++) { 91 this.types.push(array[j]) 92 } 93 this.busy = false 94 } 95 } 96 } 97 } 98 } 99 </script> 100 101 <style lang="css" scoped> 102 .nav { 103 width: 100%; 104 height: .96rem; 105 background-color: #f4f5f6; 106 display: flex; 107 position: fixed; 108 z-index: 99; 109 } 110 .channel { 111 display: inline-block; 112 flex: 1; 113 white-space: nowrap; 114 display: flex; 115 align-items: center; 116 overflow-x: scroll; 117 font-size: .30rem; 118 color: #4b4949; 119 } 120 .channel::-webkit-scrollbar { 121 height: 0; 122 } 123 .channel ul li { 124 display: inline-block; 125 } 126 .newsContent { 127 padding-top: 0.96rem; 128 } 129 .section { 130 width: 100%; 131 height: 2.24rem; 132 border-bottom:1px solid #ccc; 133 } 134 </style>
可以看到组件中引入了两个自定义的组件，横向大类菜单和纵向各类彩票最新一期的信息。使用了Mint-UI中的Infinite scroll来做无限滚动加载，Indicator来做loading。唯一的操作“菜单切换”使用vuex来做状态管理。最终效果如下图
列表的子项组件，当传入某彩票编码时，获取彩票的数据
1 <template lang="html"> 2 <div class="news" @click="toDetail"> 3 <div class="p"> 4 <span class="s1">{{name}}</span> 5 <span class="s2">第{{Detail&&Detail.expect||""}}期</span> 6 <span class="s3"> 7 <span style=" color:grey;">开奖：</span> 8 <span v-if="Detail.hasOwnProperty(‘opentime‘)&&Detail.opentime"> 9 {{(new Date(Detail.opentime)).toLocaleDateString()}} 10 </span> 11 </span> 12 </div> 13 <div class="p"> 14 <span v-for="(value, index) in RedBall" class="ball1" :key="‘Red‘+index"> 15 <span class="word"> 16 {{value}} 17 </span> 18 </span> 19 <span v-for="(value, index) in BlueBall" class="ball2" :key="‘Blue‘+index"> 20 <span class="word"> 21 {{value}} 22 </span> 23 </span> 24 </div> 25 </div> 26 </template> 27 28 <script> 29 export default { 30 data () { 31 return { 32 List: [], 33 Detail: {}, 34 RedBall: [], 35 BlueBall: [] 36 } 37 }, 38 props: [‘code‘, ‘name‘], 39 mounted () { 40 // 此处根据传过来的彩票代码获取彩票最新的数据 41 this.$myaxios.get(‘/api/‘ + this.code + ‘-20.json‘) 42 .then((response) => { 43 if (response.data.rows > 0) { 44 // 某类彩票的最近20条数据 45 this.List = response.data.data 46 // 某类彩票的最近一条数据 47 this.Detail = response.data.data[0] 48 // 彩票数据的数字码 49 if (this.Detail.hasOwnProperty(‘opencode‘) && this.Detail.opencode) { 50 let arr = this.Detail.opencode.split(‘+‘) 51 if (arr.length > 0) { 52 if (arr[0]) { 53 this.RedBall = arr[0].split(‘,‘) 54 } 55 if (arr[1]) { 56 this.BlueBall = arr[1].split(‘,‘) 57 } 58 } else { 59 this.RedBall = this.Detail.opencode.split(‘,‘) 60 } 61 } 62 } 63 }) 64 }, 65 methods: { 66 toDetail () { 67 // 点击时，将某彩票的历史数据传递给Vuex的状态管理器。然后在历史页中直接获取这些历史数据并呈现 68 this.$store.commit(‘setHistory‘, this.List) 69 this.$router.push({path: ‘/history‘, query: { name: this.name }}) 70 } 71 }, 72 computed: { 73 } 74 } 75 </script> 76 77 <style lang="css" scoped> 78 .news { 79 height: 2.24rem; 80 box-sizing: border-box; 81 width: 100%; 82 padding: 0.01rem; 83 } 84 .p{ 85 height: 1.12rem; 86 line-height: 1.12rem; 87 padding-left: .1rem; 88 padding-right: .1rem; 89 vertical-align:middle; 90 width: 100%; 91 display:inline-block; 92 } 93 .s1{ 94 color:blue; 95 width: 30%; 96 padding:2px; 97 } 98 .s2{ 99 padding-left:2px; 100 padding-right: 2px; 101 } 102 .ball1{ 103 border-radius: 50%; 104 height: 20px; 105 width: 20px; 106 display: inline-block; 107 background: #f54646; 108 vertical-align: top; 109 } 110 .ball2{ 111 border-radius: 50%; 112 height: 20px; 113 width: 20px; 114 display: inline-block; 115 background: #39f; 116 vertical-align: top; 117 } 118 .word{ 119 display: block; 120 color: #FFFFFF; 121 height: 20px; 122 line-height: 20px; 123 text-align:center; 124 } 125 </style>
三，路由设置
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 import index from ‘@/pages/index‘ 4 import history from ‘@/pages/history‘ 5 6 Vue.use(Router) 7 8 export default new Router({ 9 mode: ‘history‘, 10 routes: [ 11 { 12 path: ‘/‘, 13 component: index 14 }, 15 { 16 path: ‘/history‘, 17 component: history 18 } 19 ], 20 scrollBehavior (to, from, savedPosition) { 21 return { x: 0, y: 0 } 22 } 23 })
四，工程的入口main.js，引入各种包和声明全局变量
1 import Vue from ‘vue‘ 2 import App from ‘./App‘ 3 import axios from ‘axios‘ 4 import router from ‘./router‘ 5 import store from ‘./store/‘ 6 import MintUI from ‘mint-ui‘ 7 import ‘mint-ui/lib/style.css‘ 8 Vue.use(MintUI) 9 10 Vue.config.productionTip = false 11 axios.default.timeout = 5000 12 Vue.prototype.$myaxios = axios 13 14 /* eslint-disable no-new */ 15 let vm = new Vue({ 16 el: ‘#app‘, 17 router, 18 store, 19 template: ‘<App/>‘, 20 components: { App } 21 }) 22 console.log(vm)
Vuejs2.0构建一个彩票查询WebAPP(2)
