©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>eventbus
至于什么是eventbus,可以百度了解一下.使用方法如下
//bus.js import Vue from 'vue' var $bus=new Vue()
//我们采用把$bus挂载在原型上的方式,这样我们只需要在main.js中导入bus.js即可 Vue.prototype.$bus=$bus
//componentA.vue <template> <div class="ca"> <div @click="handleClick"> clickme<
/div> </div> </template> <script> export default { name: "componentA", props: {
msg: String }, methods: { handleClick(){ this.$bus.$emit('handleClFromChild',
'handleClFromChild----')//触发handleClFromChild事件 } } } }; </script>
//componentB.vue,在这个组件内监听handleClFromChild事件 <template> <div class="cb"> </div>
</template> <script> export default { name: "componentB", props: { msg: String }
, created(){ this.$bus.$on('handleClFromChild',function(e){
//监听handleClFromChild事件 }) } }; </script>
我们直接把eventbus挂在vue的原型上,这样调用的时候会比较方便,不要繁琐的import
<>vuex module的使用
//about.js const about={ state:{ count:45 }, actions:{ ADD(context){ console.
log('add about') } }, mutations:{ } } export default about //home.js const home=
{ state:{ count:5 }, actions:{ ADD(context){ console.log('add home') } },
mutations:{ } } export default home //store.js import Vue from 'vue' import Vuex
from 'vuex' import home from './home' import about from './about' Vue.use(Vuex)
export default new Vuex.Store({ modules:{ home,about } })
<>未开启命名空间
* 访问state,在state后直接访问module的名称
this.$store.state.home.count//访问home中的state
* dispatch和commit,对actions和mutations操作
this.$store.dispatch('ADD')
这时候就有问题了,因为有可能工程很庞大的时候会出现上述有两个名称一样的action,在dispatch
ADD的时候,Vuex在调用的时候会分别调用home和about中的ADD,先后顺序按照应用次序来定
为了避免这种情况发生,我们需要将不同module中状态和方法进行区别,有两种方法可行
* 对不同module中属性的方法进行命名 //home.js const home={ state:{ count:5 }, actions:{ [
'home/ADD'](context){ console.log('add home') } }, mutations:{ } } export
default home
此时分发home中’ADD’
this.$store.dispatch('home/ADD')
我们发现home中actions ADD的写法变成了['home/ADD'](){}
其实这就是'home/ADD':function(){}简写方式
2) 开启命名空间
<>开启命名空间
//home.js const home={ namespaced:true,//只需要在对应的module上添加这一个属性 state:{ count:5
}, actions:{ ADD(context){ console.log('add home') } }, mutations:{ } } export
default home
此时我们分发home中的ADD就可以直接this.$store.dispatch('home/ADD'),不再需要对module中相应的属性进行修改了
moudles 本来就是来帮助进行多个状态管理的,因为项目达到了一个量级,所以直接使用namespaced有益于以后的开发和维护.