久等了，提高开发效率的Vue 技巧来了(2)

我大部分都是使用的全局过滤器。像局部过滤器，一是获取到原始数据的时候可以直接进行处理，二是发现早期使用的局部过滤器都升级为全局过滤器了。如果你有好的局部过滤器场景欢迎评论

• 日期处理。后端传的数据要么是 2019-03-14 09:00:00 这种字符串类型的。要么就是时间戳类型的，但是界面通常只会展示一部分，比如只展示年月日，或者是月日啊。因此有个全局 date 过滤器，幸福到哭。这个过滤器最好是同时支持以上俩种格式。要是不知道
• 数字处理。像保留几位小数、超过多少位以字母 w 代替，或者是汉字“亿”都很常见

上面俩种是我碰到的最多的，也欢迎你评论补充。

总结

该用 filters 的地方千万别手软，超过一处就要写成公共的。否则后期要是逻辑处理的不对，你不知道哪些地方用了相同的处理逻辑很容易造成 bug 漏改的情况。

mixins 使用场景

这个属性也分为全局和局部使用，全局使用了将会对之后的所有组件产生影响。因此我不建议在业务代码中使用全局 mixins。而且感觉全局 mixins 使用起来不利于代码维护，你想突然在 template 中使用了一个一个函数第一想法肯定是去 methods 中查找，找不到就很难受了。而且破坏性也比较大，所以我都采用局部注入的方式。让别人知道这里采用了 mixins，要是遇到了一些奇怪的情况，他知道这里有 mixins 就会主动去这里面查看相关代码了。

这个属性我用的最多的是引用第三方的列表库的时候他通常都会有个 formatter 的格式化数据属性。这里 filters 是用不了的。但像列表对于数据的处理重复性是特别多的，因此 注入一个 mixins 就方便多了。

一些第三方库时用到的技巧

router 中用到的一些技巧

钩子函数 beforeEach 做路由跳转的时候会先执行 beforeEach 。因此你可以在路由跳转的时候进行判定是否可以跳转，常见场景就是判定用户是否登录，有没有某个页面的权限

// to: Route: 即将要进入的目标 路由对象 
 
// from: Route: 当前导航正要离开的路由 
 
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 
 
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 
router.beforeEach((to, form, next) => {}) 

vuex 中用到的一些技巧

action 的技巧 action 是可以异步执行方法的。我在业务中通常会遇到这样的情况：获取某种信息，但是这个信息接口多个页面都用到了，每个页面都处理一下这个接口真的很麻烦。所以传入 vuex 中共享这部分信息就十分幸福了。因为是异步的所以用到了 action。提供一个参考代码：

actions: { 
    getMemberShip ({ state, commit }) { 
      return new Promise((resolve, reject) => { 
        if (!state.memberShip) { 
          // memberShip 为 ajax 请求方法 
          memberShip(state.userInfo).then(res => { 
            commit('setMemberShip', res) 
            resolve(res) 
          }).catch(err => { 
            reject(err) 
          }) 
        } else { 
          resolve(state.memberShip) 
        } 
      }) 
    }, 
} 

（编辑：ASP站长网）