Vue3.0学习 - 第十四节,Vue3 挂载全局变量方法,在Vue3中使用vue-cookies
关于vue3.x挂在全局变量方法官方文档Vue.prototype替换为config.globalProperties在 Vue 2 中,Vue.prototype通常用于添加所有组件都能访问的 property。在 Vue 3 等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分。// 之前 - Vue 2Vue.prototype
·
关于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"));
},
},
更多推荐
已为社区贡献12条内容
所有评论(0)