使用vuex对兄弟组件传值_非兄弟组件传值和VUEX

非兄弟组件传值和VUEX

事件总线传值

新建一个js文件 memeda.jsimport Vue from 'Vue'

var Bus = new Vue({})

export default Bus

新建两个组件

{{msg}}

发送

import Bus from '../memeda.js'

import Home1 from './home1'//引入Home1组件 同一页面展示

export default {

components:{

Home1

},

data(){

return{

msg:'我是home'

}

},

methods:{

fn(){

Bus.$emit('meme',this.msg)

}

}

}

{{msg}}

import Bus from '../memeda.js'

export default {

data(){

return{

msg:'我是home1111'

}

},

mounted(){

Bus.$on('meme',(res)=>{

alert(res);//我是home

})

}

}

VUEX传值(mutations和state)

逻辑图

安装VUEXnpm i vuex --save

自建js文件import Vue from 'vue'

import Vuex from 'vuex'//引入vuex

Vue.use(Vuex)//挂载

var state1 ={

count:1

}

var mutations={//定义一个方法 所有的全局方法都可以加在里面

incCount(){//函数名

++state1.count;

}

}

var state = new Vuex.Store({//实例化Vuex

state:state1,//固定写法

mutations//固定写法 通过this.$store.commit调用

})

export default state

全局main.js引入import store from './store/index'

new Vue({

store,

})

全局组件调用数据{{this.$store.state.count}}

全局调用方法 发送

methods:{

dianji(){

this.$store.commit('incCount');//对应的是自建js文件里面的方法

}

}

Getters方法import Vue from 'vue'

import Vuex from 'vuex'//引入vuex

Vue.use(Vuex)//挂载

var state1 ={

count:1

}

var mutations={//定义一个方法 所有的全局方法都可以加在里面

incCount(){//函数名

++state1.count;

}

}

var getters={//通过this.$store.getters.computedCount调用

computedCount(){//当state里面数据发生变化后自己自动计算的值

return state1.count*20//必须return

}

}

var state = new Vuex.Store({//实例化Vuex

state:state1,//固定写法

mutations,//固定写法 通过this.$store.commit调用

getters//挂载getters

})

export default state

调用

Getters数据：{{this.$store.getters.computedCount}}

Action异步方法(ajax，计时器)

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。import Vue from 'vue'

import Vuex from 'vuex'//引入vuex

Vue.use(Vuex)//挂载

var state1 ={

count:1

}

var mutations={//定义一个方法 所有的全局方法都可以加在里面

incCount(){//函数名

++state1.count;

}

}

var getters={//通过this.$store.getters.computedCount调用

computedCount(){//当state里面数据发生变化后自己自动计算的值

return state1.count*20//必须return

}

}

var actions = {//定义actions

memeda(context){//形参必写！！！ 通过this.$store.dispatch('memeda')调用

context.commit('incCount');//执行上面的方法 固定写法

}

}

var state = new Vuex.Store({//实例化Vuex

state:state1,//固定写法

mutations,//固定写法 通过this.$store.commit调用

getters,//挂载getters

actions//挂载actions

})

export default state

调用 Actions

methods:{

aaa(){

this.$store.dispatch('memeda')

}

}