美文网首页
vue里面的全局功能函数

vue里面的全局功能函数

作者: Sune小叶子 | 来源:发表于2018-05-04 16:09 被阅读0次

项目开发过程中,我们会遇见多个组件的一些方法一样,那如果每个组件我们都重新将函数写一遍,岂不是显得很浪费时间,那更多的时候我们还是想要将代码能过复用,下面我记录一下我在项目中实现该需求的方式
文件目录如下:

  |-src
      |-compatible
          | index.js
          | getUserInfor.js
image.png

getUserInfo.js用来获取本地用户信息:

  //获取用户本地信息

const getUserInfo = function(){

    let local_name = window.localStorage.user_name?window.localStorage.user_name:'xx';
    let local_token = window.localStorage.user_token? window.localStorage.user_token:'asqdwf';
    let local_language = window.localStorage.user_languege?window.localStorage.user_languege:'zh_CN';

    return{
        userLanguage: local_language,
        userLoginName: local_name,
        userToken: local_token
    }

}

export default getUserInfo;
image.png

在main.js里面全局注册:

//引入功能函数
import compatible from './compatible'
Object.keys(compatible).forEach( key => Vue.prototype[`$${key}`] = compatible[key] )
image.png

在组件里面使用就可以像下面这样了:

created(){
    let user =  this.$getUserInfo();
    console.log(user)
  }
image.png

相关文章

  • vue里面的全局功能函数

    项目开发过程中,我们会遇见多个组件的一些方法一样,那如果每个组件我们都重新将函数写一遍,岂不是显得很浪费时间,那更...

  • vue 的全局API

    vue 的全局API:在构造器外部用vue提供给我们的API函数来定义新的功能 vue2.0_Vue.direct...

  • (第二季)Vue2.0-全局API

    全局API介绍 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局...

  • directive

    全局API 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局AP...

  • Vue全局API(上)

    一、全局API 何为全局API? 通俗的说就是在构造器之外,Vue提供的一些API函数,可以使我们定义新的功能。 ...

  • Vue2.0学习笔记Vue.directive 自定义指令(9)

    一、什么是全局API 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一...

  • Vue-手动实现全局弹窗插件

    Vue插件通常来为Vue添加全局功能。应该暴露一个install方法,这个方法的第一个参数是Vue构造函数,第二个...

  • vue全局变量

    在vue项目中 如何定义全局变量 全局函数 - CSDN博客

  • Vue 插件

    插件,通常用来为Vue 添加全局功能。引用官方文档Vue插件 使用插件 通过全局方法Vue.user()使用插件。...

  • vue.js 核心知识点七

    目录 - 7.1 vue项目中,定义全局函数 全局变量 - 7.2 Vue axios 给开发环境和生产环境配置不...

网友评论

      本文标题:vue里面的全局功能函数

      本文链接:https://www.haomeiwen.com/subject/stgdrftx.html