Vue-全局变量和方法

Posted 2022-01-03 yangchin9

一、单文件引入

1、创建存放全局变量和方法的vue文件

　　Common.uve

<script>
  const userName = ‘yangjing‘;
  function add(a,b) 
    return a+ b
  
  export default 
    userName,
    add
  
</script>

2、在需要使用的组件（A组件和B组件）中引入Common.uve

<template>
  <div>
    <h2 @click="changeName">name</h2>
    <h2 @click="add">3+6 = num</h2>
  </div>
</template>

<script>
  import Common from ‘@/components/Common‘
  export default 
    name: "Details",
    data () 
      return 
        name: Common.userName,
        num: ‘‘
      
    ,
    methods: 
      add() 
        this.num = Common.add(3,6)
      
    
  
</script>

在A组件中修改全局变量userName时在B组件中可以看到userName是更新了的

二、全局引入 全局变量模块挂载到vue原型中

如果再项目中在多个地方使用全局变量和方法用第一种方式引入肯定是相当繁琐的，因为需要在使用的地方都要引入一次；那么为了提高效率现在在main.js中引入一次然后挂载到vue原型上（Vue.portotype）

1、在main.js中引入文件，并挂载到Vue原型上

import Common from ‘@/components/Common‘
Vue.prototype.Common = Common;

2、在需要使用的组件中使用 this

<template>
  <div>
    <h2 @click="changeName">name</h2>
    <h2 @click="add">3+6 = num</h2>
  </div>
</template>

<script>
  export default 
    name: "Details",
    data () 
      return 
        name: this.Common.userName,
        num: ‘‘
      
    ,
    methods: 
      add() 
        this.num = this.Common.add(3,6)
      
    
  
</script>

三、使用Vue中的状态管理Vuex

 

四、使用本地存储存放全局变量

本地存储分两种 localStorage 和 sessionStorage