Vuex与Busemit结合使用浅谈Vuex使用方式

前言

        好久没有写文章了，最近项目紧张所以很久没有更新文章了，趁着这段时间不忙先更新一篇关于Vuex和Busemit结合使用的项目实战篇，希望大家喜欢。

Vuex

        先讲一下Vuex，每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)，这部分来自官网的介绍，大家伙有兴趣要深挖Vuex的话可以到官网去看看

        Vuex官网：Vuex官网

        第一步先进行Vuex安装

npm install vuex --save
cnpm install vuex --save

import Vue from 'vue'
import Vuex from 'vuex'
//使用Vue.use把Vuex注册成全局组件
Vue.use(Vuex);
const store = new Vuex.Store({
});
export default store;

第三部在Vuex文件夹下创建state.js存放全局状态，并在Vue_index.js引入

   state.js

const state={
    Creatpack:{
        wallet_new_length:0
    }
};
// 使用 export default 封装，让外部可以访问
export default state;

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex);
const store = new Vuex.Store({
    state,
});
export default store;

//vuex状态管理
import store from './vuex/vuex_index'
new Vue({
  el: '#app',
  router,
  //store进行注入使全局都可以用Vuex全局状态
  store,
  components: { App },
  template: ''
});

export default {
 name: '',
  data:function () {
      return{
  },
  methods:{
      reload () {
          console.log(this.$store.state.Creatpack.wallet_new_length)
      }
  },
  mounted (){
      this.reload();
  }
  }

复制代码

//Bus方法绑定到window下面，提供给外部调用
window.Bus =new Vue();

< button v-on:click="reload()">点击我< /button>
export default {
name: '',
data:function () {
return{
  },
  methods:{
      reload () {
          console.log(this.$store.state.Creatpack.wallet_new_length)
          //使用Bus.$emit方法将值传输出去
          Bus.$emit("wallet_new_length","changes");
          //我们现在可以看到使用Bus.$emit传输了一个wallet_new_length值
      }
  },
  mounted (){
   
  }
  }

复制代码

export default {
 name: '',
  data:function () {
      return{
  },
  methods:{ 
 
  },
  mounted (){
     Bus.$on("wallet_new_length",(em) => {
        //这里我们通过em就可以取到传输过来的参数
        console.log(em);
     });
  }
  }

复制代码

//引入state.js
import state from './state'
const mutations={
    //写一个计数器每次加1
    add(state) {
        state.Creatpack.wallet_new_length++;
    },
    //再写一个初始化方法初始化start里面的全局变量
    start(state) {
        return state.Creatpack.wallet_new_length=0
    }
};
// 使用 export default 封装，让外部可以访问
export default mutations;

< button v-on:click="reload()">点击我< /button>
export default {
name: '',
data:function () {
return{
//创建一个基础数字用来计数
wallet_new_length:0
},
methods:{
reload () {
//通过 （this.$route.path） 判断我们是否在 （vueb.vue） 组件下这里我写的非常简单你们实际应用中可以通过实际情况判断怎么去写
      let this_path_roter=this.$route.path;
    if(this_path_roter=="vueb"){
         //这一步是重复点击时的操作
         //重点来了我们通过this.$store.commit("add")来进行计数的工作也就是刚刚创建的add方法Vuex中规定通过this.$store.commit可以对定义的方法进行调用
         this.$store.commit("add");
         //之后this.$store.state.Creatpack.wallet_new_length赋值在this.wallet_new_length基础的值上面
         this.wallet_new_length=this.$store.state.Creatpack.wallet_new_length;
          
          //使用Bus.$emit方法将值传输出去
          
          Bus.$emit("wallet_new_length","changes");
          //我们现在可以看到使用Bus.$emit传输了一个wallet_new_length值
      }
        }else {
          //这不用说调用start的全局状态初始化方法就行
          this.$store.commit("start");
          //将this.wallet_new_length进行初始化
          this.wallet_new_length=0;
          //传输值给vueb.vue知道就行
          Bus.$emit("wallet_new_length","changes");
          //这一步是要跳转vueb.vue组件下的
          this.$router.push({path:'vueb'});
        }
  },
  mounted (){
   
  }
  }

复制代码

        提示上面的vuea和vueb两个组件可以认为是两个互不干涉父组件下的子组件，在这里需要传值进行相关的交互所以我就单独拎出来说。

        vueb.vue

export default {
 name: '',
  data:function () {
      return{
           //在这里我们也需要创建一个初始数值注意这里要比vuea.vue里面的初始数值小上一个数
           wallet_new_length_change:-1，
           //这里thisa原来是true而thisb是false的我就不再写相关的html了这里仅做演示用
           thisa:false,
           thisb:true
      },
      methods:{ 
  },
  mounted (){
     Bus.$on("wallet_new_length",(em) => {
     //这个和上面的vuea组件一样我就不做过多讲解了
     let this_path_roter=this.$route.path;
      if(this_path_roter=="vueb"){
        //首先通过判断我们存的全局状态数值是否不等于vueb组件下的初始数值
        if(this.$store.state.Creatpack.wallet_new_length!=this.wallet_new_length_change){
            //不等于的话就把全局状态数值减1然后赋值到vueb组件的初始数值中
            this.wallet_new_length_change=this.$store.state.Creatpack.wallet_new_length-1;
            //之后就是初始化之前说的thisa和thisb了
            this.thisa=true;
            this.thisb=false;
        }
      }else {
          //这里判断如果不在vueb组件里了就初始化wallet_new_length_change的值待下次进行计算
          this.wallet_new_length_change=0;
      }
     });
  },
  beforeDestroy(){
      //这个就是我之前说的Busemit的小bug它不会自动销毁只有我们手动销毁才可以通过Bus.$off方法进行销毁
      Bus.$off("wallet_new_length")
  }
  }

复制代码