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

本文链接：https://blog.csdn.net/csl125/article/details/117432769

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

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

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

在 Vue 3 等同于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字符串单位形式设置

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

Unit	full name
y	year
m	month
d	day
h	hour
min	minute
s	second

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.在组件中使用官方文档

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

  // const { appContext: { config: { globalProperties: { $cookies: cookies } } } } = getCurrentInstance()
 
    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"));
    },
},