vue开发过程中的一些稍微高级的操作 (vuex骚操作)

没有一段时间 vue开发经验的小伙伴来说，可能很多高级的骚操作东西都不会用到，比如 mixin 这个 我想 很多初级前端 和博主这个菜鸟前端 一样都没用过哈。

据说mixin 封装组件的时候 会用到 (我没听错吧 封装组件 这个大佬才会做，我不会，撤了撤了)

当然 我们的项目本来就那么小 需要什么骚操作哈 这点 我也认同 毕竟适合的才是最好的

今天拿 vuex 来做个 小 例子 来讲解一些 开发过程中一些 稍微高级的骚操作

我相信哈 用过 一段时间 vuex 的童鞋 一定 对 辅助函数 mapState ，mapMutations,mapActions 这些函数 不陌生 (感觉陌生的童鞋 建议 去看看vue的官网哈)

先上一段代码 store/index.js export default new Vuex.Store({ state: { count:0 }, mutations: { setCount(state){ state.count=state.count+1; // +1 } }, actions: { setCount1({commit}){ setTimeout(()=>{ commit('setCount'); },500) } }, modules：{} })

然后再组件中使用

import { mapState,mapMutations,mapActions } from "vuex" computed:{ ...mapState(['count']), // 映射 到 组件的 计算属性中 } methods: { ...mapMutations(['setCount']), ...mapActions(['setCount1']), }

然后我们就可以再组件中使用了 直接 掉就行了 count this.setCount this.setCount1 很舒服 是吧

好了 随着我们项目不停的变大 vuex中的代码 相当臃肿 这天项目经理来了 小赵(公司里面领导对博主的称呼) 建议把 vuex 中 划分下模块 进行开发

哎 没办法 拿人钱财 踢人敲代码 既然说到 划分模块 那就要用到 vuex 中的第四个属性值了 modules

为了不让 store/index.js 越来越长 我就不写在 这个js里面 假设把 a模块提取出来了 a.js

export default { state: { countA:1 }, mutations: { setCount(state){ state.count=state.count+1; // +1 } }, actions: { setCount1({commit}){ setTimeout(()=>{ commit('setCount'); },500) } } }

然后 再 index.js 中引入

import a from './a.js' modules:{ a }

这下 在 组件中使用模块的 参数 也和普通的不太一样了

computed:{ ...mapState({countA:state =>state.a.countA}), },

函数的引用 和这个一样哈 就不一一赘述了

但是 这样写 是不是 有点难受哈 我还想和之前的那样 那么 简短多好 是吧 可以吗 其实是 可以的 不过需要我们在模块中加点东西 namespaced:true, 加到 模块中就可以了 namespace 命名空间 至于干嘛的 建议 不懂得同学 可以去看看 typescript 一句话概括就是 解决重名问题 更加具有封闭性

export default { namespaced:true, // 加上这个 state: { countA:1 }, mutations: { setCount(state){ state.count=state.count+1; // +1 } }, actions: { setCount1({commit}){ setTimeout(()=>{ commit('setCount'); },500) } } }

然后我们在子组件中 就可以 使用了

computed:{ ...mapState('a',['countA']), },

在上面 问题搞好了 之后 又过了一段时间 3. 随着模块越来越来 我们的 store/index.js 引入的模块也越来越多了

import a from './a.js' import b from './b.js' import c from './c.js' 。。。。 // 此处略去 十几个模块

这样看着 好麻烦 是吧 首先引入这么多 而且以后 我们 要新加的东西 还得 手动 import 引入

能不能找个 东西 帮我们自动引入呢 答案 当然是 有的了

webpack 有一个api require.context() 可以帮我们做到这个功能 假设项目文件是这样的哈 var files=require.context(’./’,false,/.js$/i); // 第一个参数 是 指定那个目录下 // 第二个参数是 是否要检索 目录下的子目录 其实不需要 一般都是 fasle // 第三个参数 是 根据正则要匹配那些文件 执行完之后 返回一个 函数 files 其实是一个函数 这个函数有三个属性 三个属性 也都是 函数 其中有用的是哪个 keys 属性 keys 也是一个函数 执行完 返回一个存储 匹配文件路径的数组 files.keys() 我下面使用了 我是用 forEach 你也可以使用 reduce哈 files(item).default // 获取到 当前文件 导出的 默认 模块

let files=require.context('./',false,/\.js$/i); var modules={}; files.keys().forEach(item=>{ if(item=="./index.js"){ return; } modules[item.replace(/\.\/|\.js$/g,'')]=files(item).default; })

modules 就得到了 那三个文件 导出的默认 模块 然后注册到 vuex中就可以直接使用了

export default new Vuex.Store({ state: { count:0 }, mutations: { setCount(state){ state.count=state.count+1; // +1 } }, actions: { setCount1({commit}){ setTimeout(()=>{ commit('setCount'); },500) } }, modules：modules(可写可不写) // es6的 属性简写 })

你可以把 上面的那个 文件自动导入 的 步骤 封装到一个函数中放到公共方法中 在实际开发中还是很有用的哈

关注 菜鸟前端博主 持续更新前端知识 像我这样的 博主可是很少见的哦