关于vue2的模块级总结

前阵子在赶一个项目的进度，一直没时间做总结，今日闲来无事，消化一下。

背景

vue2的项目，面向受众为g端

内容

1. 项目原因，单路由下包含详情&列表两页面。根据v-if跳转，笔者这里用的是动态组件的方式

2. 同样由于项目原因，使用的模块级vuex，因而在使用时，也有了许多盲点：

（如图：）

1. 使用createNamespacedHelpers导入模块级vuex的辅助函数

createNamespacedHelpers方法用于使用模块级vuex的辅助函数，免于臃肿的路径导入

假设vuex有一模块moduleA，有一stateA,有一mutationA用于操作stateA则使用createNamespacedHelpers的方式为：

// pageA.vue
<script>
import { createNamespacedHelpers } from "vuex"; // 导入createNamespacedHelpers方法
const { mapState:moduleA_mapState, mapMutations:moduleA_mapMutations} =  createNamespacedHelpers("moduleA");// 基于createNamespacedHelpers中的moduleA导入内部的mapState, mapMutations 
// 此处由于是共有页面，因此须重命名
const { mapState:moduleB_mapState, mapMutations:moduleB_mapMutations} =  createNamespacedHelpers("moduleB");//基于createNamespacedHelpers中的moduleB导入内部的mapState, mapMutations 

export default {
computed:{
...moduleA_mapState({
dataA:stateA // 将stateA映射为dataA
}),
...moduleB_mapState({
dataB:stateB // 将stateA映射为dataB
})
},
methods:{
...moduleA_mapMutations(['SET_stateA ']),//导入a模块的a方法
...moduleB_mapMutations(['SET_stateB ']),//导入b模块的b方法
}
}
</script>

以上是使用createNamespacedHelpers函数进行模块级vuex的数据处理方法。

2. props仅监听第一次数据的问题:
   这个问题一个月前碰到过，当时也的确给出了解决办法，可是为了修复这个bug却要使用watch、data两处，在多props下，这种方式就显得有一些臃肿，因而可以使用以下办法:

export default {
  props:{
    myProp:[String]
 },
 computed:{
  myProp_Computed(){
      return this.myProp
  }
 } 
}

以上是规避props仅接受第一次传入数据的办法

3. 移入移出事件的简写
   在写入移入移出事件时，首先应添加使用防抖/节流方法限制此事件，如果移入移出方法同时存在，如果事件够简单，可以通过使用$event来判断事件类型：

//template

<div v-for='item of list' :key='item.id'>
    <div
       @mouseenter="mouse(item, $event)"
       @mouseleave="mouse(item, $event)"
       class="tab-title">
    </div>
</div>

<script>
import throttle from "lodash/throttle"; // 导入lodash的throttle方法
export default {
      // event的`type`标识了此次事件的类型，简单事务场景下可以直接写成一个方法 
      mouse: throttle(function (item, { type }) {
        item.removable = type === `mouseenter`;
        item.isShowEdit = type === `mouseenter`;
    }, 200),

}
</script>

总结：

1. 在写入模块级变量时，要思考该模块是否为通用的，如果仅仅是一个或者两个地方使用，考虑使用组件传值的方式

2. 在使用mapMutations设置数据时，不能仅考虑直接使用，特别是在另一个组件在监听被set的值变化时随即发生请求动作时的这个业务场景时，考虑将事件回传至page页由page页统一使用mapMutations设置数据，这样做的目的是防止出现意外的重复渲染事件发生。

3. 由于实际是两个页面共用一个路由，且组件数据是在vuex中存储，因而要考虑当路由切换时，页面在销毁前要将vuex中的数据重置为初始态。(时间太赶，来不及写一些新方法)

4. 以后再写此类需求时，应尽可能将多建立几个组件以避免写在同一个大组件里导致可读性差

5. 使用mixins以避免重复逻辑出现

6. 如果要使用async/await，外部必须要使用try...catch...包裹，以避免意外报错造成代码阻塞，如果是crud类的请求，必须要判断返回值是否为全等于true,这是为了避免某些可能近似trusty的值影响接下来的动作(tip:promise == true)

第一次使用此方式写，也有一些教训
反思：

1. 代码冗余：在最开始写的时候没有考虑到可拓展性，导致最后由于临时的需求而不得不重构

2. 代码重复较多：没有使用mixin，导致重复逻辑

3. 没有遵从一个函数只做一件事，这里是尤其要注意的一个点

4. 样式不够完美，有的样式没有处理好，在不该出现滚动条的地方出现了滚动条，随后笔者将会重新写一篇样式笔记。

这是笔者上个月在写此种样式时遇到的一些笔记，希望能给同样有此类需求的读者一些参考。

以上。