新闻资讯APP——Mainpage.vue组件

新闻资讯APP——Mainpage.vue组件

重点摘录：

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

结果：