Vue3.0学习 - 第十四节，Vue3 挂载全局变量方法，在Vue3中使用vue-cookies

╰+攻爆jí腚メ 2022-10-17 01:35 81阅读 0赞

### [关于vue3.x挂载全局变量方法官方文档][vue3.x] ###

### `Vue.prototype` 替换为 `config.globalProperties` ###

在 Vue 2 中， `Vue.prototype` 通常用于添加所有组件都能访问的 property。

在 Vue 3 等同于[`config.globalProperties`][config.globalProperties]。这些 property 将被复制到应用中作为实例化组件的一部分。

// 之前 - Vue 2
    Vue.prototype.$http = () => {}

// 之后 - Vue 3
    const app = createApp({})
    app.config.globalProperties.$http = () => {}

## 在Vue2.x中使用 vue-cookies： ##

### 1.安装vue-cookies ###

npm install vue-cookies --save

### 3.引入vue-cookies ###

在main.js中引入

// 配置cookie
    import cookies from 'vue-cookies'
    Vue.prototype.$cookies = cookies;  //配置时候prototype.$这里的名字自己定义不是固定是cookies
    
    
    
    或者
    
    import Vue from 'vue'
    import VueCookies from 'vue-cookies'
    Vue.use(VueCookies)

### 4.API ###

\-设置全局配置，设置cookie过期时间和url

this.$cookies.config(expireTimes[,path])  // default: expireTimes = 1d , path=/

\-设置一个cookie

this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]])   //return this

\-获取一个cookie

this.$cookies.get(keyName)       // return value

\-删除一个cookie

this.$cookies.remove(keyName [, path [, domain]])   // return this

\-检查某个 cookie name是否存在

this.$cookies.isKey(keyName)        // return false or true

\-获取所有 cookie name，以数组形式返回

this.$cookies.keys()  // return a array

##    5.全局设置 ##

// 30天后过期
    this.$cookies.config('30d')
    
    this.$cookies.config(new Date(2019,03,13).toUTCString())
    
    this.$cookies.config(60 * 60 * 24 * 30,'');
    
    // window object
    window.$cookies.config('30d')

### 5.1单个name设置 ###

//不写过期时间，默认为1天过期
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
    
    // 1天过期，忽略大小写
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
    
    // 以秒为单位，设置1天过去
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
    
    // 填写Date对象，明确指定过期时间
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
    
    // 填写一个时间字符串，指定过期时间
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")
    
    //浏览器会话结束时过期
    this.$cookies.set("default_unit_second","input_value","0");
     
    //永不过期
    this.$cookies.set("default_unit_second","input_value",-1);

### 5.2字符串单位形式设置 ###

设置过期时间，输入字符串类型(字符均忽略大小写)：

<table> 
 <thead> 
  <tr> 
   <th>Unit</th> 
   <th>full name</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>y</td> 
   <td>year</td> 
  </tr> 
  <tr> 
   <td>m</td> 
   <td>month</td> 
  </tr> 
  <tr> 
   <td>d</td> 
   <td>day</td> 
  </tr> 
  <tr> 
   <td>h</td> 
   <td>hour</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>minute</td> 
  </tr> 
  <tr> 
   <td>s</td> 
   <td>second</td> 
  </tr> 
 </tbody> 
</table>

this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60秒后过去
    
    this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30分钟后过去
    
    this.$cookies.set("token","GH1.1.1689020474.1484362313","24d");  // 24天后过期
    
    this.$cookies.set("token","GH1.1.1689020474.1484362313","4m");  // 4个月后过期
    
    this.$cookies.set("token","GH1.1.1689020474.1484362313","16h");  // 16小时后过期
    
    this.$cookies.set("token","GH1.1.1689020474.1484362313","3y");  // 3年后过期

其他操作

// set path
    this.$cookies.set("use_path_argument","value","1d","/app");  
    
    // set domain
    this.$cookies.set("use_path_argument","value",null, null, "domain.com");  
    
    // set secure
    this.$cookies.set("use_path_argument","value",null, null, null,true);

以上是Vue2.x中使用vue-cookies  顺带着介绍了一下vue-cookies

## 那么在vue3.x中如何使用呢 ##

### 1.安装vue-cookies ###

npm install vue-cookies --save

### 2.在main.js中引用 ###

import VueCookies from 'vue-cookies'
    
    const app = createApp(App)
    app.config.globalProperties.$cookies = VueCookies;//全局挂载 同vue2.x Vue.prototype.$cookies
    
    
    app.use(store).use(router).use(ElementPlus, {
        size: 'small',
        zIndex: 3000
    }).component('svg-icon',svgIcon).mount('#app')

### 3.在组件中使用 [官方文档][Link 1] ###

const internalInstance = getCurrentInstance()
    
    internalInstance.appContext.config.globalProperties // 访问 globalProperties

import { getCurrentInstance, onMounted } from "@vue/runtime-core";
    
    export default {
      setup() {
        let internalInstance = getCurrentInstance();
        let cookies = internalInstance.appContext.config.globalProperties.$cookies
     
        onMounted(() => {
         console.log("挂在全局的方法",cookies)
         cookies.set("token", "7777777788888888", "1M");
     
    
        });
    
        let loginFun = async () => {
          let token = cookies.get("token");
          console.log("ttokenss", token);//ttokenss 7777777788888888
         
        };
    
        return { loginFun };
      },
    };

### 我们也可以使用**Provide / Inject**后面我们再讨论这种方法 ###

--------------------

# Provide / Inject #

挂在全局变量，尤大大好像推荐我们使用依赖注入的方法

接下来我们使用**Provide / Inject**

在main.js中

import VueCookies from 'vue-cookies'
    const app = createApp(App)
    // app.config.globalProperties.$cookies = VueCookies;
    
    // 第二种方法
    app.provide('$cookies', VueCookies);

在组件中使用

*Composition API:*

import { getCurrentInstance, inject, onMounted } from "@vue/runtime-core";
    
     setup() {
     
    
        let cookies = inject('$cookies')
    
        cookies.set("token", "7777777788888888", "1M");
    
        let token = cookies.get("token");
        console.log("ttokenss", token);
    
    
     }

*Options API:*

inject: ['axios'],   // injecting in a component that wants it
    
    
    
    inject: ["$cookies"],
    methods: {
        loginOutss() {
          // let internalInstance = getCurrentInstance();
          // let Cookies =
          //   internalInstance.appContext.config.globalProperties.$cookies;
          console.log("ttokenss222222222", $cookies.remove("token"));
        },
    },

[vue3.x]: https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
[config.globalProperties]: https://v3.cn.vuejs.org/api/application-config.html#globalproperties
[Link 1]: https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance