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")

参考：

（1）、vue-element-admin

（2）、https://blog.csdn.net/qq_41588568/article/details/89521449?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-89521449.nonecase&utm_term=vue%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%20%E6%98%BE%E7%A4%BA%E7%94%A8%E6%88%B7%E5%90%8D&spm=1000.2123.3001.4430

（3）、https://blog.csdn.net/weixin_43932281/article/details/86153719

（4）、https://blog.csdn.net/kerelee_li/article/details/85285043