非兄弟组件传值和VUEX

事件总线传值

新建一个js文件 memeda.js

import Vue from 'Vue'
var Bus = new Vue({})
export default Bus

新建两个组件

<template>
    <div>
        {{msg}}
        <button @click="fn"> 发送</button>  
        <Home1></Home1>
    </div>
</template>
<script>
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)
        }
    }
}
</script>

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
import Bus from '../memeda.js'
export default {
    data(){
       return{
            msg:'我是home1111'
       }
    },
    mounted(){
        Bus.$on('meme',(res)=>{
            alert(res);//我是home
        })
    }
}
</script>

<style>

</style>

VUEX传值(mutations和state)

逻辑图

安装VUEX

npm 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}}

全局调用方法

 <button @click="dianji"> 发送</button> 
  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

调用

<h1>Getters数据：{{this.$store.getters.computedCount}}</h1>

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

调用

<button @click="aaa"> Actions</button> 
methods:{
        aaa(){
            this.$store.dispatch('memeda')
        }
    }