Vuex的替代方案;
-
Vuex不好之处
1、引起不必要的体积;
2、引起复杂的管理麻烦; -
替代方案
-
1、bus
全局注册一个bus
//index.js
Vue.prototype.bus = new Vue();
通过$emit触发事件
//App.vue
this.bus.$emit('change','我是传递过去的参数')
在需要监听以上事件的组件中的mounted中监听
//HelloWorld.vue
mounted(){
this.bus.$on('changeDep',(msg)=>{
this.msg = '由App.vue点击图片触发'+msg;
})
},
原理:利用vue自带的观察者模式进行事件监听;
缺点:
1、每次都要触发事件,监听事件,管理起来麻烦;
2、Vue.prototype.bus = new Vue();这种写法不优雅;
- 2、简易store
创建一个myStore.js
import vue from 'vue';
export const store = vue.observable({a:123});
export const mutations = {
changeDep(msg){
store.a = msg;
}
}
//HelloWorld.vue
computed:{
a(){
return store.a;
}
}
打包优化
1、减少resolve、限制include;
2、dll原理;
3、happypack;
-
插件解决项目问题
为什么需要插件?
提供你的全局自定义操作。
项目中总会有项目的一些特殊需求,插件就是为了我们解决这些需求的。它可以注入到每个组件的生命周期,然后自动做某些事情。 -
需求:项目vuex过大(比如vuex中几百个数据,最后打包结果会进入app.js),导致打包结果过大
处理:按组件异步拆分加载vuex
目录
插件编写
var obj = {
install:function(vue){
vue.mixin({
created:function(){
if(this.$options.isVuex){
var name = this.$options.name;
//动态import就是懒加载,不会和app.js打包到一起
import('../store/modules/'+name).then((res)=>{
this.$store.registerModule(name,res.default);
});
}
}
})
}
}
module.exports = obj;
模块中的内容,如store/modules/HelloWorld.js中内容:
export default{
state:{
number1:1
}
}
这样动态引入以后,在访问HelloWorld.vue时候可以拿到模块的内容