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

大湿兄
1,059 阅读4分钟

前言

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

Vuex

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

        Vuex官网：Vuex官网

        第一步先进行Vuex安装

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

        第二步创建一个存放Vuex的文件夹Vuex，在Vuex文件夹下面新建Vue_index.js文件，在里面引入Vuex。

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;

        Vue_index.js

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

        之后在main.js中引入Vue_index.js

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

        至此Vuex就已经引入成功，新建一个vuea.vue组件在里面先查看我们之前存的state.Creatpack.wallet_new_length状态


export default {
 name: '',
  data:function () {
      return{

  },
  methods:{
      reload () {
          console.log(this.$store.state.Creatpack.wallet_new_length)
      }
  },
  mounted (){
      this.reload();
  }
  }

        通过this.$store方法console.log（this.$store.state.Creatpack.wallet_new_length）的值,至此Vuex先讲到这里，下面等到结合的时候我们再讲解如何结合使用Vuex与Busemit以及需要注意的细节。

Busemit

        现在我们来讲讲Busemit，首先什么是Busemit。简单来讲就是注册一个空的实例，作为中转站。从而实现组件之间的通信（父传子，子传父，子传子等）

        上面字面意思已经很清新了，就让我们看看如何实现一个Busemit，首先是main.js的代码


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

        通过上面的一句代码就能实现Busemit的创建及引用是不是很神奇，接下来我们要讲如何使用Bueemit传递参数。

        第一步还记得我们上面新建的vuea.vue文件吗，现在我们还是用它来讲解Busemit的实现步骤


< 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 (){
   
  }
  }

        第二步创建vueb.vue文件，在里面接收我们刚刚传输过来的值

        vueb.vue

export default {
 name: '',
  data:function () {
      return{

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

        上面通过Bus.$on方法我们就轻松取得了wallet_new_length传输过来的值，说句题外话Bus.$emit的传输方式还可以多参数传输比如Bus.$emit("xxxx",{"xxxx":"xxxx"})和Bus.$emit("xxxx",[xxxx,xxxx])这两种方法，注意取值的方式也会有所不同第一种是通过xxxx参数名取值第二种是通过em[1],em[2]这种方式取值，但是使用Busemit方法还是有一些弊端的，这个我会在下面Vuex与Busemit结合使用时说明。

Vuex与Busemit结合使用

        好了上面讲了这么多，现在终于可以进行实战了，先说一下需求我们希望在vueb.vue不销毁和不刷新的前提下重置里面的数据，那么接下来就是实现了，还记得我们刚才创建的Vuex文件夹吗现在打开里面的Vuex_index.js然后在文件夹里面新建一个js文件命名为mutations.js在下面这样写

//引入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;

        之后在Vuex_index.js里引入mutations.js

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

        现在就可以调用了，这里注意mutations是Vuex里唯一可以改变全局状态的方法类似于methods的使用方式，但是调用方法就有比较大的区别。

        现在我们可以思考我点击vuea.vue里面的button标签想要传递一个计数器到vueb.vue进行数据的重置首先

        vuea.vue

< 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")
  }
  }

        这边再进行强调一下Busemit的小bug它不会自动销毁只有我们手动销毁才可以通过Bus.$off方法进行销毁，然后在组件销毁之前beforeDestroy()引入这个方法就行,这个是根据你们的业务来的需要在哪里销毁就在那里添加就行，下周我会具体说明Busemit的其他bug解决方案，所以敬请期待。

        以上便是我这篇Vuex与Busemit结合使用浅谈Vuex使用方式的所有内容如有不懂得地方或者需要提出意见的地方请在下方评论区告诉我，谢谢。

avatar
文章
阅读
粉丝