背景

Vue项目中,我们总会遇到一些公共数据的处理,如方法拦截,全局变量等,本文旨在解决这些问题

解决方案

事件总线

所谓事件总线,就是在当前的Vue实例之外,再创建一个Vue实例来专门进行变量传递,事件处理,管理回调事件等

//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...}) //页面一
this.$bus.$on('sayName',(e)=>{
alert('我的名字是',e)
}) //页面二
this.$bus.$emit('sayName','小明');//我的名字是 小明

原型挂载

所谓原型挂载,就是在main.js中将公共变量,事件,都挂在到Vue原型上

//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
console.log('我的名字是',e)
}
new Vue({...}) //组件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王 //组件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王

vuex

VuexVue提供的一种,专门用来管理vue中的公共状态,事件等等,以应用登录为例

//新建store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {//此处为公共变量
userId:"",//用户Id
loginSession:""//用户登录凭证
},
mutations: {//此处为同步方法
setLoginSession(state,loginSession){//存入state中的用户凭证
state.loginSession = loginSession;
},
setUserId(state,loginSession){//存入state中的用户凭证
state.loginSession = 'user_'+Math.floor(Math.random()*100000000000);
}
},
actions: {//此处为异步方法
getUserId({state,commit},options={}){//从服务器取登录凭证,然后返回是否登录状态
return new Proise((resolve)=>{//返回一个promise对象,来让调用者可以使用.then来进行下一步操作
axios.get('api').then((res)=>{
commit('setLoginSession',res.data.loginSession)
resolve(this.getters.isLogin)
})
}))
}
},
modules: {//此处为混入更多的vuex小模块 },
gatters: {//此处为计算变量
isLogin(){
return (this.userId&&this.loginSession)?true:false
}
}
})
//main.js中注入vuex
import store from './store/store.js'
Vue.prototype.$store = store; //app.vue中
export default {
data(){
return {}
},
mounted(){
this.$store.commit('setUserId');//设置用户Id
this.$store.dispatch('getUserId').then((result)=>{//查询登录凭证,并返回登录结果
console.log(this.$store.getters.isLogin,result);//true true 此处也可以查看计算属性中的是否登录状态
if(result){
alert('登录了')
}else{
alert('未登录')
}
});
}
}

从0开始探究vue-公共变量的管理的更多相关文章

  1. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

  2. 如何在vue中全局引入stylus文件的公共变量

    新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract t ...

  3. 随机跳转页面之使用VBA公共变量

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  4. C# 引用类型公共变量的影响

    public int[] a =new int[2]; private void button1_Click(object sender, EventArgs e) { bing(a); } priv ...

  5. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  6. m_Orchestrate learning system---三十三、公共变量多弄成全局变量

    m_Orchestrate learning system---三十三.公共变量多弄成全局变量 一.总结 一句话总结:比如班级id,小组id,这样省事,而且减少数据库的访问,加快访问速度,而且节约代码 ...

  7. 最齐全的vue公共函数给你们放出来啦

    import Vue from 'vue' /* 配置参数 */Vue.prototype.winH = document.documentElement.clientHeight; Vue.prot ...

  8. less的引用及公共变量的抽离

    一.什么是less? less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技 ...

  9. C#-WebForm-★内置对象简介★Request-获取请求对象、Response相应请求对象、Session全局变量(私有)、Cookie全局变量(私有)、Application全局公共变量、ViewState

    内置对象: 1.Request - 获取请求对象 用法:接收传值 protected void Page_Load(object sender, EventArgs e) { TextBox1.Tex ...

随机推荐

  1. for do-while while区别

    分别用for  do-while while求1-100的和

  2. Linux内核驱动学习(二)添加自定义菜单到内核源码menuconfig

    文章目录 目标 drivers/Kconfig demo下的Kconfig 和 Makefile Kconfig Makefile demo_gpio.c 目标 Kernel:Linux 4.4 我编 ...

  3. Gitlab升级记

    一: 验证gitlab备份是否可用 这里所使用的操作系统环境全部都基于Cetnos7, 防火墙以及selinux全部关闭. 1. 另外找一台机器,安装与服务器版本相同的gitlab,根据原服务器数据的 ...

  4. 单口RAM、双口RAM、FIFO

    单口与双口的区别在于,单口只有一组数据线与地址线,因此读写不能同时进行.而双口有两组数据线与地址线,读写可同时进行.FIFO读写可同时进行,可以看作是双口.    双口RAM分伪双口RAM(Xilin ...

  5. [csu1605]数独(精确覆盖问题)

    题意 :给定数独的某些初始值,规定每个格子的得分,求得分最大的数独的解. 思路:这是某年的noip的原题,高中时就写过,位运算也就是那个时候学会的--.这题明显是暴搜,但是需要注意两点,一是需要加一些 ...

  6. PMS学习

    一,PMS的adb相关重要指令 1,adb shell dumpsys package(dump所有的系统内apk信息) 2,adb shell dumpsys package “com.androi ...

  7. CSS学习—day1

    摘要:web前端设计三剑客分为是html.CSS.Javascript,前面我们已经对html基础知识做了介绍,它定义了页面基本组成,而CSS则控制网页的样式和布局. 首先,明确一个问题,什么是CSS ...

  8. 使用gitlab ci构建IOS包并发送通知消息到企业微信

    在之前的文章中,我们介绍了使用gitlab ci构建Android包的方法.今天我们介绍使用gitlab ci如何构建IOS包,并且在打包成功或者失败时,如何将消息通知到企业微信. 如果对gitlab ...

  9. 用了这么多年MySql,这些好习惯你用过哪些

    一:新建表和字段建议: 1.所有数据表和字段要有清晰的注释,字段说明 说明:不管是创建者还是其他开发或者后续维护者都能清楚知道数据表和字段定义的含义   2.表名.字段名使用小写字母或数字,禁止出现数 ...

  10. strut2登陆注册验证码

    1. 生成图片和验证码 package com.jmu.code; import java.awt.Color; import java.awt.Font; import java.awt.Graph ...