vue组件化和模块化,vue拓扑图组件

因为在大多数项目中，我们对全球状态的管理不仅仅是一种情况的需求，有时还有多方面的需求。 例如，如果你写商业街上的项目，你使用的全球state可能是关于购物车的部分，也可能是关于商品价格的。 在这种情况下，必须考虑使用vuex的modules模块。 具体如何使用modules？ 我们一步一步走吧：

首先，在store文件夹下创建新的modules文件夹，然后在modules文件中创建要管理的js文件。 既然要分别管理不同部分的状态，就必须将它们分成独立的状态文件。 下图：

相应store文件夹下的index.js内容将被改写如下：

importVuefrom'vue '； importVuexfrom'vuex '； importfooterstatusfrom './modules/footer status ' importcollectionfrom './modules/collection ' vue.use (vuex )； exportdefaultnewvuex.store ({ modules : { footer status，collection}}；

相应的js，其中的namespaced:true表示需要在单独的文件中使用吸引人的画笔。 (mapGetters，mapActions将在后面介绍) )其中的方法必须注明来自哪个模块的方法：

//collection.jsconststate={ collects : [ ]， 初始化collects数组} const getters={ render collects (state )//托管变化的collectsreturnstate.collects } const mutations={ pup } 如何改变items () collects items state.collects.push (items ) }constactions={involepushitems ) context，item )///item ) 65传递的数据格式参数item是items context.com MIT (push collects (，item ) }exportdefault ) namespaced:true， /全局引用此文件中的方法时用于标识此文件名的state actions//footer status.jsconststate={///设置的全局访问state对象showe changableNum:0//要设置初始属性值(constgetters=(isshow ) state ) {returnstate.showFooter} )， 自定义如何更改getchangednum ((return state.changable num ) const mutations=(show ) state )//state的初始值， 其中的参数可以传递state.showFooter=true}，hide(state )//同上state.showFooter=false} )，newfooter num ) state.changable num=num (} const actions )以自定义hidefooter(context )//触发器mutations的函数的方式，context是store实例/同上context.comMIT ) show ) }，getnewnum ) context，num )//同上num以变化的形式加入context.comMIT )//全局引用本文中的方法时

现在，您有了有关两个模块的state管理文件。 是footerStatus.js和collection.js。 如果现在尝试运行当前代码，项目将报告错误。 我们把上面的代码模块化后划分了参照处，所以还没有更改。 接下来，让我们看一下使用贴图状态、贴图获取器和贴图操作。 首先，在所需组件中添加import{mapState、mapGetters、mapActions}from'vuex '； 首先，让我们修改上面列出的临时示例tabs选项卡的隐藏或显示组件代码

templatelt

;div id="app">    <router-view />    <FooterBar v-if="isShow" />  </div></template><script>import{ mapState, mapGetters, mapActions } from 'vuex'import FooterBar from '@/components/common/FooterBar'import config from './config/index'export default {  name: 'App',  components: {    FooterBar: FooterBar  },  data () {    return {    }  },  computed:{    ...mapState({        //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值         isShow:state=>state.footerStatus.showFooter //注意这些与上面的区别就是state.footerStatus,                                                      //里面定义的showFooter是指footerStatus.js里state的showFooter      }),     //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁    /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，                         //第二个isShow是对应的footerStatus.js里的getters里的isShow      })*/  },  watch: {    $route(to,from){      if(to.name=='book'||to.name=='my'){         this.$store.dispatch('footerStatus/showFooter') //这里改为'footerStatus/showFooter',                                                         //意思是指footerStatus.js里actions里的showFooter方法      }else{         this.$store.dispatch('footerStatus/hideFooter') //同上注释      }    }  }}</script>

现在项目代码应该就不会报错了，好,最后咱们再来看一下mapActions的用法，实际上上面的this.$store.dispatch('footerStatus/showFooter')已经算是一种执行相应模块的action里的方法了，但有时会牵扯的事件的触发及传值，那就会有下面的mapActions用法了,还记得上面的另一个模块collection.js吗？来看一下里面的actions中的方法结构：

 

const state={  collects:[],  //初始化一个colects数组};const getters={  renderCollects(state){ //承载变化的collects    return state.collects;}};const mutations={   pushCollects(state,items){ //如何变化collects,插入items      state.collects.push(items)   }};const actions={  invokePushItems(context,item){ //触发mutations里面的pushCollects ,传入数据形参item 对应到items      context.commit('pushCollects',item);  }};

需要传值来实时变动state.collects里的数据，那肯定要在执行它的地方进行传值了，所以下面用到它的地方我们用了个@click来执行这个invokePushItems方法了，并且传入相应的对象数据item,如下：

 

<template>  <div >    <section class="joinState">      <div class="joinStateHead">        <span class="h3">全国改性料通讯录</span>        <span class="joinStatus" @click="invokePushItems(item)">加入收藏列</span>      </div>    </section>  </div></template><script>import { mapActions } from 'vuex'export default {  components:{     conditionFilter  },  name: 'bookDetail',  data () {    return {      msg: '',      item:{         id:'01',         productName: '苹果',         price:'1.6元/斤'       }    }  },  mounted() {    this.$store.dispatch('footerStatus/hideFooter')  },  methods:{      ...mapActions('collection',[ //collection是指modules文件夹下的collection.js          'invokePushItems'  //collection.js文件中的actions里的方法，在上面的@click中执行并传入实参      ])  }}</script>

这样一来，在这个组件里面操作的 collecttion.js 中的state的数据，在其他的任何的一个组件里面都会得到相应的更新变化了，获取状态的页面代码如下：

 

<template>  <div>    <ul>      <li v-for="(val,index) in arrList" :key="index">        <h5>{{val.productName}}</h5>        <p>{{val.price}}</p>      </li>    </ul>  </div></template><script>import {mapState,mapGetters,mapActions} from 'vuex';    export default {        name: 'book',        data() {            return {            }        },    computed:{        // ...mapState({  //用mapState来获取collection.js里面的state的属性值        //    arrList:state=>state.collection.collects        // }),        ...mapGetters('collection',{ //用mapGetters来获取collection.js里面的getters            arrList:'renderCollects'        })    }    }</script>

至此，vuex中的常用的一些知识点使用算是简单的分享完了，当然了，相信这些只是一些皮毛！只能说是给予刚接触vuex的初学者一个参考与了解吧！有哪里不明白的或不对的，留言下。