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

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

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

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

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

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

1. 先上一段代码 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
很舒服 是吧

2. 好了 随着我们项目不停的变大 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的 属性简写
})

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

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