备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

沃土前端社区Vue系列教程 - event bus 和 vuex

2017-12-15 1225
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在开发过程中，父子组件传递数据，我们用props和$emit可以解决问题，那么非父子组件之间的数据传递我们要怎么解决呢，一般有两个方案，一个event bus（事件总线）和 vuex。

在开发过程中，父子组件传递数据，我们用props和$emit可以解决问题，那么非父子组件之间的数据传递我们要怎么解决呢，一般有两个方案，一个event bus（事件总线）和 vuex。我们先来说event bus。

一、用vue脚手架构建一个简单的项目

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack vuexdemo
# 安装依赖，走你
cd vuexdemo
npm install
npm run dev

二、使用event bus实现跨组件通信

event bus事件总线，组件之间的通信需要使用一个中介来实现，在event bus里面使用一个空的Vue实例来做为通信的桥梁，下面是使用event bus来实现改变登录状态的demo。

  1. 在原有main.js里加上这么一句
// 把bus
Vue.prototype.bus = new Vue();
  1. 修改原有的Index.vue组件，添加如下代码：
 data() {
    return {
      loginStatus: false
    };
  },
  created() {
    // 监听事件
    this.bus.$on("login", (data) => {
      this.loginStatus = data;
    });
  }

修改后的Index.vue代码如下：

<template>
  <div class="hello">
    <h1>登录状态：{{ loginStatus?'已登录':'未登录' }}
      <span v-if="!loginStatus">
        <router-link to="/login">去登录</router-link>
      </span>
    </h1>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      loginStatus: false
    };
  },
  created() {
    this.bus.$on("login", (data) => {
      this.loginStatus = data;
    });
  }
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
  1. 新建组件Login.vue，在组件Login.vue添加登录操作，在登录成功的时候，触发‘login’事件，Login完整代码如下：
<template>
  <div>
    <input type="text" placeholder="请输入用户名"><br />
    <input type="text" name="" placeholder="请输入密码"/><br/>
    <button @click="login" class="login">立即登录</button>
   <p>还没有账号,<router-link to="/register">立即注册</router-link></p> 
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.bus.$emit("login", true);
      this.$router.push('/');
    }
  }
};
</script>
<style>
.login {
  width: 100px;
  height: 30px;
  margin-top: 10px;
}
.psw {
  margin-top: 5px;
}
</style>
  1. 同时在vue-router里面配置路由/login，代码如下:
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})
  1. 测试：Index.vue与Login.vue是两个非父子关系的组件，当我们点击Login组件里面的立即登录的时候，Index组件里面显示的登录状态就会发生改变，这样就实现了非父子组件之间的通信。需要注意的是：负责监听的组件必须先挂载，才能使用$emit来触发事件。简单来讲，类似jQuery一样，事件必须先绑定，你才能取触发事件。

三、使用vuex实现跨组件通信

跨组件通信，使用event bus的做法，对于简单的应用来讲，但是对于复杂的应用来讲，event bus对于事件的管理就可能力不从心了，你不一定记得你有多少个组件监听了该事件，你可能会担心，那个组件到底挂载了没有。所以在复杂的应用中我们推荐使用vuex。

什么是vuex

  1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex包含以下几个元素state（存放数据），action（动作，我把它理解为指令，用户派发action，可以看做是用户发出指令），mutation（改变，用来改变state里面的数据）一个完整的过程是视图（用户）派发 action，action提交修改，mutation负责修改state里的数据，state里的数据被修改了，对应的视图就被刷新，见下图。


    img_be68719a9e63469fb846d7e1dec92b81.png
  2. 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有相似的地方，都是把数据存到一个地方，然后取出来，或者进行数据的修改，但有以下两点不同：
    • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
    • 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
一个vuex demo
  1. 打开上面的例子，在当前文件夹安装vuex
npm i vuex --save
  1. 新建组件Headline.vue,详细代码如下：
    vuex中提供了mapGetters、mapActions、mapMutations用来映射store里面的相应属性，方便我们直接使用我们事先定义的getters、actions和mutations。
<template>
  <h1>组件名称：{{title}}</h1>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    // 映射 `this.title` 为 `this.$store.getters.title`
    ...mapGetters(["title"])
  }
};
</script>
  1. 在src文件夹下新建文件夹store，再新建文件index.js，在index.js里面添加以下内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    // 存储数据
    state: {
        title: '根组件'
    },
    // 读取数据
    getters: {
        title: state => state.title
    },
    // 动作
    actions: {
        // 修改标题的action
        'UPDATE_TITLE_ACTION'({ commit }, payload) {
            commit('UPDATE_TITLE', payload);
        }
    },
    // 变化;转变
    mutations: {
         // 修改state里的title
        'UPDATE_TITLE'(state, payload) {
            state.title = payload;
        }
    }
})

当涉及的数据比较多的时候，getters、actions、mutations可以用单独的文件导出。

  1. 在main.js里添加下面两行代码
import store from './store'

new Vue({
  el: '#app',
  // 新增代码
  store,
  router,
  template: '<App/>',
  components: { App }
})
  1. 在Login组件里添加如下代码,当我们访问Login组件的时候，就可以看到页面上的组件名称发生了改变
beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.$store.dispatch('UPDATE_TITLE_ACTION','登录组件')
    })
  },

同理，我们可以新建一个Register组件，做相关操作，当我们访问/register时改变组件的名称，Register组件代码如下，同时需要在router里面配置添加/register：

<template>
  <div>
      <button>立即注册</button>
      <p>
          已有账号? <router-link to="/login">立即登录</router-link>
      </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.$store.dispatch("UPDATE_TITLE_ACTION", "注册组件");
    });
  }
};
</script>

router/index.js里面的代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

7.modules，当我们需要管理很多的状态时，会使用modules来进行分割，具体做法如下：
在store的文件夹新建modules文件夹，里面封装某个具体组件的state、getters、actions和mutations，一下新建一个Foot组件，设置关于该组件的状态信息，其他组件可以修改它的状态，从而改变Foot组件显示的内容（统计浏览过的路由的次数）。

  • 在components下新建组件Foot.vue，代码如下：
<template>
  <div class="foot">
      浏览过的路由个数<span class="num">10</span>
  </div>
</template>

<script>
export default {};
</script>

<style>
.foot {
  background: gray;
  position: fixed;
  bottom: 0px;
  height: 100px;
  width: 100%;
  color: #ffffff;
  line-height: 100px;
  font-size: 20px;
}
.num {
    border-radius: 50%;
    border: 1px solid;
    margin-left: 20px;
    padding: 5px;
}
</style>
  • 在store/modules下新建foot.js，代码如下：
export default {
    state: {
        routeNum: '1'
    },
    getters: {
        routeNum: state => state.routeNum
    },
    actions: {
        'UPDATE_ROUTENUM_ACTION'({ commit }, payload) {
            commit('UPDATE_ROUTENUM',payload);
        }
    },
    mutations: {
        'UPDATE_ROUTENUM'(state, payload) {
            state.routeNum = state.routeNum + payload;
        } 
    }
}
  • 修改store/index.js，修改后代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
import foot from './modules/footer'
Vue.use(Vuex)
// import getters from './getters'
// import mutations from './mutations'
// import actions from './actions';

export default new Vuex.Store({
    // 存储数据
    state: {
        title: '根组件'
    },
    // 读取数据
    getters: {
        title: state => state.title
    },
    actions: {
        // 修改标题
        'UPDATE_TITLE_ACTION'({ commit }, payload) {
            commit('UPDATE_TITLE', payload);
        }
    },
    mutations: {
        'UPDATE_TITLE'(state, payload) {
            state.title = payload;
        }
    },
    modules: {
        foot,
    }
})
  • 在其他组件去派发action来改变Foot组件的状态
    可以在每一个组件都加上这么一句
beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.$store.dispatch("UPDATE_TITLE_ACTION", "登录组件");
      vm.$store.dispatch("UPDATE_ROUTENUM_ACTION",1);
    });
  },

当然这个是比较笨的方法，更好的办法是，在main.js里面加上以下这段代码，那么当每一次变换路由的时候我们给底部加圆圈的小数字加1了。

router.beforeEach((to, from, next) => {
  store.dispatch('UPDATE_ROUTENUM_ACTION',1);
  next();
})
在开始的event bus的例子里我们通过event bus改变组件的登录状态，在这里我们也可以使用vuex轻松实现，我们用state用loginState来保存登录的状态，当我们登录成功的时候，就修改loginState的值，具体实现过程如下。
  1. 在store/modules下新建文件login.js，具体代码如下：
import { mapActions } from "vuex";

export default {
    state: {
        loginState: false
    },
    getters: {
        loginState: state => state.loginState
    },
    actions: {
        'UPDATE_LOGINSTATE_ACTION'({ commit }, payload) {
            // UPDATE_LOGINSTATE为对应的mutation
            commit('UPDATE_LOGINSTATE', payload);
        }
    },
    mutations: {
        'UPDATE_LOGINSTATE'(state, payload) {
            state.loginState = payload;
        }
    }
}
  1. 修改store/index.js，在modules里添加，修改后的代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
import foot from './modules/footer'
import login from './modules/login'
Vue.use(Vuex)

export default new Vuex.Store({
    // 存储数据
    state: {
        title: '根组件'
    },
    // 读取数据
    getters: {
        title: state => state.title
    },
    actions: {
        // 修改标题
        'UPDATE_TITLE_ACTION'({ commit }, payload) {
            commit('UPDATE_TITLE', payload);
        }
    },
    mutations: {
        'UPDATE_TITLE'(state, payload) {
            state.title = payload;
        }
    },
    modules: {
        foot,
        login
    }
})
  1. 修改login.vue，代码如下：
<template>
  <div>
    <input type="text" placeholder="请输入用户名"><br />
    <input class="psw" type="text" name="" placeholder="请输入密码"/><br/>
    <button @click="login" class="login">立即登录</button>
    <p>还没有账号,<router-link to="/register">立即注册</router-link></p> 
  </div>
</template>

<script>
export default {
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.$store.dispatch("UPDATE_TITLE_ACTION", "登录组件");
    });
  },
  methods: {
    login() {
      this.$store.dispatch('UPDATE_LOGINSTATE_ACTION', true);
      this.$router.push("/");
    }
  }
};
</script>
<style>
.login {
  width: 100px;
  height: 30px;
  margin-top: 10px;
}
.psw {
  margin-top: 5px;
}
</style>
  1. 修改components下的index.vue，代码如下：
<template>
  <div class="hello">
    <h1>登录状态：{{ loginState?'已登录':'未登录' }}
      <span v-if="!loginState">
        <router-link to="/login">去登录</router-link>
      </span>
      <button v-else @click="logout">退出登录</button>
    </h1>
  </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
export default {
  name: "HelloWorld",
  data() {
    return {
      
    };
  },
  computed: {
    ...mapGetters(['loginState'])
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.$store.dispatch("UPDATE_TITLE_ACTION", "根组件");
    });
  },
  methods: {
    ...mapActions(['UPDATE_LOGINSTATE_ACTION']),
    logout() {
      // this.$store.dispatch('UPDATE_LOGINSTATE_ACTION',false);
      this.UPDATE_LOGINSTATE_ACTION(false);
    }
  }
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
探讨问题：
  1. devtool
  2. vue路由的history模式
  3. 刷新后的store里面的数据清空，怎么处理
文章标签：
JavaScript
前端开发
存储
容器
数据安全/隐私保护
关键词：
前端vue
前端教程
VUE.js VUEX
VUE.js前端
VUE.js bus
儒清
目录
相关文章
小粉蛋
|
1月前
|
JavaScript 前端开发
vue前端下载，实现点击按钮弹出本地窗口，选择自定义保存路径
这个不用代码实现（网上也找不到方法可以调出另存为窗口），更改浏览器设置就可以，否则，现在的浏览器都是默认直接保存到下载路径中
小粉蛋
57 3
风水道人
|
17天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
风水道人
78 0
桃李春风一杯酒
|
8天前
|
JavaScript 前端开发 API
游戏开发入门：Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端（Flask或Django）和Vue.js前端开发游戏变得流行，能提高开发效率和可维护性。本文指导如何构建这样的项目，包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件，强调前后端协作和API接口的重要性。这种架构促进团队合作，提升代码质量和游戏体验。
桃李春风一杯酒
26 3
桃李春风一杯酒
|
9天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端，其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端，提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求，结合Vue组件展示商品和管理购物车，开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节，但本文为入门提供了基础指导。
桃李春风一杯酒
12 2
破浪前进
|
12天前
|
存储 JavaScript
vue3 vuex
vue3 vuex
破浪前进
18 0
vue3 vuex
Cool架构
|
22天前
|
缓存 JavaScript 前端开发
Vue3——Router4教程(小满版本)（二）
Vue3——Router4教程(小满版本)
Cool架构
46 0
穆雄雄.
|
29天前
|
前端开发 JavaScript Java
springboot+vue实现用户统一认证、管理-前端实现
springboot+vue实现用户统一认证、管理-前端实现
穆雄雄.
25 0
hhzz
|
1月前
|
JavaScript API
Vue3新的状态管理库-Pinia(保姆级别教程)
Vue3新的状态管理库-Pinia(保姆级别教程)
hhzz
31 0
Boale_H
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
Boale_H
63 0
猿大师
|
1月前
|
Web App开发 JavaScript 前端开发
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
现在，随着数字化进程渗透到到各行各业，数据安全已经成为了数字化革命中的重要组成部分，而在线Office成在OA、ERP、文档系统中得到了广泛的应用，为我国的信息化事业也做出了巨大贡献。随着操作系统、浏览器及Office软件的不断升级和更新换代，加上国家对信息化、数字化系统要求的不断提升，一些厂家的WebOffice控件产品不断被淘汰出局，而现存的几个产品也存在以下几个问题：
猿大师
414 1
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档

热门文章

最新文章

  • 1
    vue3快速上手
  • 2
    Vue3——Router4教程(小满版本)（二）
  • 3
    VUE获取上月、当月、前几月等等问题
  • 4
    vue利用级联选择器实现全国省市区乡村五级菜单联动
  • 5
    Vue3项目中使用vue-router
  • 6
    Vue.js学习详细课程系列--共32节（1 / 6）
  • 7
    vue实现下拉列表远程搜索示例（根据关键词模糊搜索）
  • 8
    vue element plus 快速开始
  • 9
    Vue.js学习详细课程系列--共32节（4 / 6）
  • 10
    【vue报错】error:0308010C:digital envelope routines::unsupported
  • 1
    借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站
    87
  • 2
    vue前端下载，实现点击按钮弹出本地窗口，选择自定义保存路径
    57
  • 3
    构建高性能Web应用：前端性能优化的关键策略与实践
    41
  • 4
    构建响应式Web界面：现代前端开发的最佳实践
    36
  • 5
    前端开发中的响应式设计与移动优先原则
    24
  • 6
    探索现代Web应用中的微前端架构
    26
  • 7
    前端性能优化实践：从理论到实际操作
    32
  • 8
    构建高效前端项目：模块化与组件化策略
    27
  • 9
    前端发展趋势：WebAssembly、PWA 和响应式设计
    25
  • 10
    前端开发新趋势：Web3、区块链和虚拟现实
    37

    • 相关课程

    更多
  • 移动Web前端开发
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    阿里云oss简介和使用流程