vue.js中引入vuex储存接口数据及调用的详细流程(2)


接下来在你的子组件里面就可以分流啦!

子组件里的代码是这样的:

import {mapState} from 'vuex';
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

在这里我自定义了个goods来代替state.newslist.goods,因为我的数据是

{
"goods":[]
}

这种格式,我嫌长,就缩短了下。

然后在html里面就可以直接调用了,这里贴一小块代码

<ul>
 <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
 <span class="text border-1px">
 <span class="icon" v-show="item.type>0">
 </span>
 {{item.name}}
  </span>
  </li>
</ul>

基本上流程就是这样

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对黑区网络的支持。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/477.html