您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

关于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字符串单位形式设置

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

Unitfull name
yyear
mmonth
dday
hhour
minminute
ssecond
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.在组件中使用  let {ctx} = getCurrentInstance()

import { getCurrentInstance, onMounted } from "@vue/runtime-core";

export default {
  setup() {
    let {ctx} = getCurrentInstance()
 
    onMounted(() => {
     console.log("挂在全局的方法",ctx.$cookies)
    ctx.$cookies.set('token',"7777777788888888",'1M')
 

    });

    let loginFun = async () => {
         let token = ctx.$cookies.get('token')
         console.log("ttokenss",token)//ttokenss 7777777788888888
     
    };

    return { loginFun };
  },
};

 

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

 

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进