前言

在使用vue3开发过程中，博主经常会遇到多个组件公用某一个变量，这个时候使用组件之间相互通信一类的方式就显得比较麻烦，最好就是设置全局变量来搞定，那在vue3+vite的环境中改如何使用全局变量呢？

一、安装依赖

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单说，它可以满足多个组件共享一个变量的需求，使用以下命令在控制台安装

npm install vuex

二、使用步骤

1.建立store(仓库）

我们会在store里面把公用变量保存起来，并提供set方法修改这些共有变量，创建文件目录如下

创建文件index.js（文件名无限制）大，代码如下，我们设置了一个全局变量base和修改它的方法changeBase

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
    state () {
        return {
            base:"",//基本数据
        }
    },
    mutations: {

        /*
       修改基础数据
       */
        changeBase(state,base) {
            state.base=base;
        },
    
    }
})

export default store;

2.组件使用

在组件我们可以非常方便的使用以下代码来控制全局变量

store.commit("changeBase","test")//设置全局变量base的值

let data=store.state.lnglat//取用全局变量base的值

总结

本文仅仅简单介绍了vuex的基本使用，有待后期慢慢深入学习，如果存在问题，欢迎大家批评指正