MENU

vuex 的配置和事件总线

June 11, 2019 • web阅读设置

vuex 的使用

一 在终端安装vuex

//用npm安装vuex
npm install vuex --save

二 在项目目录的src文件下创建store文件夹

创建文件夹将vuex需要配置的文件放到该文件夹目录下 并创建一个index.js文件

三 在index.js文件里配置vuex

基础配置
//引入vue 
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//实例化vuex
var state = new Vuex.Store({  
})
//导出实例化对象
export default state  

vuex中常用配置

//引入vue 
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//实例化vuex

var state1 = {//定义数据
    msg:"hello"
}

var mutations = {//定义方法
    incCount(){
        ++state1.count;
    }
}

var getters ={ // 自动计算
    computedCount(){
        return state1.count*5;
    }
}

var actions ={ // 异步请求
    func(context){
        context.commit("incCount")
    }
}


var state = new Vuex.Store({  
    state:state1 //state为全局可使用的数据
    mutations,//mutation为执行的方法 可对数据操作
    getters,//getters为自动计算函数 自己执行并返回结果
    actions,//异步请求,执行mutations里的方法
})
//导出实例化对象
export default state  

四 在配置完vuex初始js文件后 需挂载到全局的main.js中

挂载是为了全局可以调用 vuex的公共资源

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'


import store from './store/index'  //引入vuex文件


Vue.config.productionTip = false

Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,          //挂载store 供全局调用
  components: { App },
  template: '<App/>'
})

五 调用

在所有要使用的地方使用全局调用方法

  • state 的调用
调用方法 : this.$store.state.msg

例:
<h1>{{ this.$store.state.msg }}</h1>
//输出index.js 中的msg的内容 hello
  • mutation 的调用
<button @click="inCount">点击数值++</button>

methods: {
        inCount(){
            this.$store.commit("incCount")
        }
    },
        
        //调用mutation的方法必须用commit调用
  • getters 的调用
<h1>{{ this.$store.getters.computedCount }}</h1>

该结果为计算后的结果 并且将vuex定义的方法当属性用
  • actions 的调用
<button @click="memeda">点击数值++</button>

methods: {
        memeda(){
            this.$store.dispatch("func")
        }
    },
        
        //异步actions方法调用必须用dispatch

事件总线

事件总线传值

新建一个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>
Leave a Comment