vue工程中使用全局变量
最近碰到了要在vue的工程中使用全局变量的事儿。于是学习了些。
图1 工程中store的结构
1、使用Cookie
js-cookie 可以对Cookie进行set,get
npm i js-cookie
npm i js-cookie --registry=https://registry.npm.taobao.org 使用国内镜像加速安装
安装完成后
\store\modules\user.js:
import Cookies from 'js-cookie'
将目标数据存入Cookie中
Cookies.set("user_name",data.username)
图2
在需要用变量的xx.vue可以获取到:
let name_get = Cookies.get("user_name")
（2）、将数据存储在store中
将数据存储在store中的话，会在刷新页面的时候清空store存储。而存储在localStorage/sessionStorage中，刷新页面时，不会清空存储。
\store\getters.js中：
图3
getters中添加user: state => state.user.user,
\store\modules\user.js：
mutations添加
SET_USER: (state, user) => {
state.user = user
}
mutations: {
SET_CODE: (state, code) => {
state.code = code
},
……
SET_USER: (state, user) => {
state.user = user
}
},
图4
将要存储的信息存储到store中
在需要使用变量的xx.vue中，
import store from '@/store'
let name_get = store.getters.user
（3）、使用localstorage、sessionstorage
这两个都是浏览器的存储，使用的api都一样。
\store\modules\user.js中：
向sessionStorage中传入存储变量
sessionStorage.setItem("user_name",data.username)
在需要使用变量的xx.vue中
let name_get = sessionStorage.getItem("user_name")
参考：
（3）、https://blog.****.net/weixin_43932281/article/details/86153719
（4）、https://blog.****.net/kerelee_li/article/details/85285043