Vue 全局变量防刷新优雅实现

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(2067)   2024-03-16 09:33:01

1.vue项目中创建global.js


创建global.js放于main.js同级目录(可自己随意放)

export default {
  getToken()
  {
    return window.localStorage.token;
  },
 setToken(token) {
  window.localStorage.token = token;
 },
 getInfo() {
  if (window.localStorage.info)
    return JSON.parse(window.localStorage.info);
  return null;
},
 setinfo(user) {
  window.localStorage.info = JSON.stringify(user);
}
}

 


上面代码分别实现了对象和字符串的存储,由于基于localStorage所以需要H5浏览器支持。
 

 

2 vue项目main.js配置

 

import global from './global';

Vue.prototype.global = global;

其他你的代码
 

3 vue全局变量使用

 

let _self=null;
export default {
    name: "demo-vue",
    created:function(){
     _self=this;
   },
    data() {
    },

    methods: {
         test(){
             var token=_self.global.getToken();
             console.log(token)
         }
    }
  };


遗留一个小问题,localStorage必须手动清除,否则永久存放,也可以试试sessionStorage。如果你有更好的方法,欢迎告知。感谢。

标签: vue 全局变量
地址:https://www.leftso.com/article/502.html

相关阅读

1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataLis...
前言有时候,我们需要对js的原生对象进行扩展,达到全局使用更方便的效果
vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body&gtl;     <di...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...
一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决