新闻资讯APP——Mainpage.vue组件
重点摘录:
-
vuex中的辅助函数mapState,mapGetters,mapMutations,mapActions
-
这些辅助函数主要是为了避免在组件调用代码中写太多的部分,用最简单的方式来调用Vuex。
-
获取vuex数据的语法格式:
mapActions(“数据仓库模块名称”,[ "数据名称"])
或
mapActions({“数据仓库模块名称”,[ "数据名称"]})
-
比对一下在组件中获取数据仓库中的数据,使用封装前后
Markup
export default {
mounted() {
// 使用map辅助函数:
console.log(this.user.mytest)
console.log(this.test)
// 不使用map辅助函数:
console.log(this.$store.state.user.mytest)
console.log(this.$store.getters.test)
},
computed: {
...mapGetters({
'test': 'doSome'
}),
...mapState({
'user': 'user'
})
}}
可以简单理解为:
mapGetters将 store 中的 getter 映射到局部计算属性,剩下的依次列推
-
步骤 :
从 vuex 包中引入 mapGetters ,mapActions进来;
Markup
import {mapGetters, mapActions} from 'vuex'
2.es6中的对象展开运算符“...”
Markup
...mapGetters('List',['list']),
3.使用第三方字体
步骤:
step1:下载依赖文件
Markup
cnpm install font-awesome --save
step2:
在当项目中的main.js入口文件中,引入font-awesome 和 common.css
代码:
Markup
<!-- -->
<template>
<div>
<div>
<div >
<i class="fa fa-search search" aria-hidden="true" @click="toSearchPage"></i>
搜索
</div>
<i class="fa fa-qrcode qrcode" aria-hidden="true"></i>
</div>
<ul>
<li v-for="(item,index) in tabs" @click="clickTabs(item,index)" :class="{'clickTab':theTabIndex==index}">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in list" @click="toNewsPage(item.id)">
<img :src="item.thumbnail" alt="">
<div>
<p>{{item.title}}</p>
<div>
<span v-if="item.isHot">热点</span>
<span>{{item.source}}</span>
<span>{{item.time|timerFilter}}</span>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import {mapGetters, mapActions} from 'vuex'
export default {
name:'Mainpage',
components: {},
data() {
return {
theTabIndex:0
};
},
// 计算属性--获取数据仓库中的数据
computed: {
...mapGetters("Category", ["ccc"]),
...mapGetters("List",["list"]),
tabs() {
return ["推荐", "热点"].concat(this.ccc);
},
},
watch: {},
methods: {
...mapActions('Category',['getCategories']),
...mapActions('List',['getListByCategroy']),
clickTabs:function(item,index){
// 把点击这一项li元素对应的索引值 拿到,赋值给 数据中心data中的theTabIndex上去使用
this.theTabIndex = index;
this.getListByCategroy({
potwords:item
})
},
toSearchPage:function(){
this.$router.push({path:'/searchpage'})
},
toNewsPage:function(params){
this.$router.push({path:'/newspage', query:{id:params}})
}
},
// 过滤器
filters:{
timerFilter:function(val){
return val.substring(0,10)
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
this.getCategories();
this.getListByCategroy({
potwords:'推荐'
})
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='' scoped>
/*@import url(); 引入公共css类*/
.contain{
width:100%;
height:100%;
overflow:hidden;
position: relative;
}
.contain .header{
background:#d33d3e;
padding:7px 10px 7px 20px;
}
.contain .header .header_search{
display:inline-block;
width:88%;
line-height:32px;
vertical-align: middle;
background:#fff;
padding-left:8px;
margin-right:5px;
border-radius:5px;
}
.contain .header .header_search .search{
margin-right:6px;
}
.contain .header .qrcode{
font-size:22px;
line-height:32px;
vertical-align: middle;
}
.contain .nav_wrap{
width:100%;
line-height:33px;
height:33px;
vertical-align:middle;
border-bottom:1px solid #e8e8e8;
}
.contain .nav_wrap li{
float:left;
width:14%;
text-align:center;
}
.contain .nav_wrap li.clickTab{
color:red;
}
.contain .content_wrap{
width:100%;
height:calc(100% - 80px);
overflow-y:auto;
}
.contain .content_wrap li{
height:70px;
padding:10px;
border-bottom:1px solid #e8e8e8;
}
.contain .content_wrap li img{
float:left;
width:100px;
margin-right:10px;
}
.contain .content_wrap .rt_con{
width: calc(100% - 110px);
display:inline-block;
}
.contain .content_wrap .rt_con .con_tit{
font-weight:400;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
.contain .content_wrap .rt_con .con_detail{
margin-top:4px;
line-height:20px;
vertical-align:middle;
color:#a9a9a9;
font-size:12px;
}
.contain .content_wrap .rt_con .con_detail .hot{
display:inline-block;
font-size:10px;
line-height:17px;
color:red;
border-radius:6px;
padding:0 3px;
border:1px solid red;
margin-right:4px;
}
.contain .content_wrap .rt_con .con_detail .source{
margin-right:4px;
}
</style>
结果: