原文地址:

Vue3全局变量基础用法(vuex)_bug别找我的博客-CSDN博客_vue3 全局 null

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

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

npm install vuex
1
二、使用步骤
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的基本使用,有待后期慢慢深入学习,如果存在问题,欢迎大家批评指正
 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐