从0开始探究vue-公共变量的管理
2024-09-04 21:57:56
背景
在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
Vuex是Vue提供的一种，专门用来管理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('未登录')
}
});
}
}
最新文章
- STL源码--序列式容器
- js获取页面中图片的总数
- 动态调用wcf接口服务
- bzoj4009
- Ajax是什么（转）
- python高级编程（第12章：优化学习）3
- j2ee面试宝典翻译（1）
- Java 集合 散列表hash table
- Pivot Table系列之切片器 (Slicer)
- JS中有关分支结构、循环结构以及函数应用的一些简单练习
- 开启Apache的server status监测
- 实验七 《FBG》—-小学生课后习题答案原型设计
- 二进制按位与(&) 按位或(|)  异或运算(^)
- Python练习九
- MVC简单用户登录授权认证
- crossdomain.xml配置不当的利用和解决办法
- maven 父工程 消除重复 对子模块进行管理 主要继承依赖
- laravel 模版赋值
- 【Linux学习 】Linux使用Script命令来记录并回放终端会话
- 通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示