Vue全局变量和方法的使用

╰+哭是因爲堅強的太久メ 2022-12-18 10:52 209阅读 0赞

### ***1、创建文件来存放Vue的全局变量和全局方法-common.vue*** ###

### ***2、引入common.vue文件使用定义好的变量和方法*** ###

<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: "test",  
    data () \{  
      return \{  
        name: common.userName,  
        num: ''  
      \}  
    \},  
    methods: \{  
      add() \{  
        this.num = common.add(3,6)  
      \}  
    \}  
  \}  
</script>

### ***三、使用前端仓库vuex*** ###

vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。以一个全局单例模式管理  
当应用遇到多个组件共享状态时使用Vuex，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。  
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

**具体请参考我写的vuex的博文**

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

本地存储分为localStorage和sessionStorage  
    localStorage：永久性，一直存在于浏览器中，除非用户手动清除localStorage；一般为5M浏览器不同有些许区别；不参与和服务器的通信。  
    sessionStorage：在当前会话下有效，关闭页面和浏览器清除后失效；一般为5M浏览器不同有些许区别；不参与和服务器的通信。  
    API：二者的api形式相同  
localStorage.setItem("key","value");  //以“key”为名称存储一个值“value”  
localStorage.getItem("key");  //获取名称为“key”的值  
localStorage.removeItem("key");  //删除名称为“key”的信息。  
localStorage.clear();  //清空localStorage中所有信息

### ***五、使用cookie存储*** ###

这种方式极不推荐，毕竟大小限制，还需要设置过期时间。  
cookie在过期时间之前一直有效即使窗口或浏览器关闭；存放数据大小为4k左右；有个数限制（随浏览不同）一般不能超过20个；与服务端通信，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。