vuex配置全局变量

最新推荐文章于 2024-05-20 10:28:09 发布
最新推荐文章于 2024-05-20 10:28:09 发布
阅读量1.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h2639235668/article/details/127461734
版权

vue.js

在vue中，某些页面中都需要某个对象的值:比如完成登录功能以后，需要记住登录的对象，就会配置一个全局的对象，供某个界面拿到当前登录对象的名字、昵称等

配置全局变量：(注：我使用的Hbuilder X)

1.下载vuex: 在如下这个窗口中，输入npm i vuex@3.2.6 --force(注：@后面表示的是版本号，--force是要在当前能兼容，否则会下载失败（因为hbuilderx版本太高，配置的vuex版本太低，就会不兼容）

 2.下载完成之后，在项目下src下，创建一个store目录，该目录下再配置一个.js文件(如图)

 3.在index.js文件中，配置全局需要的某个对象：

4. 在main.js文件中，引入index.js文件

 5.再在main.js文件中，把引入时import后的文件名store配置到new vue下

 6.在需要的使用的vue界面中，就如下图使用全局的对象值

 

h2639235668
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vuex 设置全局状态
SimonWvW
07-19 422
Vuex 设置全局状态 1. 全局引入vue, vuex, cookie import Vue from 'vue' import Vuex from 'vuex' import cookie from './cookie' 2. 创建Vuex store 实例 export default default new Vuex.Store({state,mutations,actions,gett...
vuex实现全局变量定义
qq_39123467的博客
03-22 275
安装成功后，我们建立一个store.js的文件，目的是与main.js分开管理，我们打开store.js看一下，state是用来声明全局变量的地方，我们在某个组件中使用时要this.$store.state.属性名就行了。因为这里我有很多组件中使用了axios请求，并且在开发和测试环境中要随时替换地址，所以这个访问地址就比较固定，需要做一个全局变量优化一下，比如这里，我有三个地址，这里依然是她们3个…所以我们需要用一下vuex。快速过一遍vuex实际用法。
Vuex (全局变量管理~~多个页面共享数据)
伟庭师兄的博客
09-06 196
vue 实例中定义的method方法中：通过 this.$store.commit('increment'),//注册一个increment的action，并通过context提交个mutations。//写法二：直接书写context对象需要用到的属性或方法。//写法一：直接书写context对象。//注册increment事件。//注册increment事件。//提交mutations。//提交mutations。//提交mutations。
vuex和全局变量的区别
m0_51181022的博客
05-20 324
基本上就是一个容器，它包含着你应用中大部分的状态(和单纯的全局对象有以下两点不同。和全局对象两者的区别描述。
Vue项目中的全局变量--vuex
CosecantY的博客
10-29 991
1、先安装vuex npm install vuex --save-dev 2、在项目里建一个store.js文件，在该文件里可定义公共的变量和函数 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {}, mutations: {}, actions: {} }) export default store 3、在main.js
Vue总结第六天~Vuex全局变量管理
伟庭的博客
12-31 1766
Vue总结第六天~Vuex全局变量管理
vuex全局变量使用
weixin_30646505的博客
02-14 521
vuex全局变量使用 1 import Vuex from 'vuex' Vue.use(Vuex); 2定义常量 const video = { state: { url: '', cover: '', playStatus: false }, ...
vuex全局变量的几种实现方式
04-10
在本文中，我们将深入探讨Vuex全局变量的几种实现方式，特别是在uni-app这个基于Vue.js的多端开发框架中的应用。 1. **创建Store模块** Vuex的核心是`store`对象，它包含应用的状态、mutations（状态变更方法）和...
在vue里面设置全局变量或数据的方法
11-28
在Vue.js框架中，设置全局变量或数据是十分常见的需求，尤其在大型项目中，为了在各个组件之间共享状态和信息，全局变量的使用显得尤为重要。本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。 ...
深入浅析vue全局环境变量和模式
11-21
Vue.js 是一款流行的前端框架，它的CLI工具（Vue CLI）为开发者提供了许多便利，包括管理全局环境变量和工作模式。本文将深入探讨如何在Vue项目中有效地利用这些特性。 环境变量在任何软件开发中都扮演着至关重要的...
vue-cli3.0 环境变量与模式配置方法
10-17
1. `.env` 文件：全局通用的环境变量，所有情况下都会使用。 2. `.env.local` 文件：同`.env`，但此文件不会被 Git 跟踪，只适用于本地。 3. `.env.[mode]` 文件：特定模式下的环境变量，如 `.env.development` 用于...
详解如何在vue-cli中使用vuex
12-09
在Vue.js应用程序中，Vuex是一个非常重要的状态管理库，尤其在处理中大型单页应用时，它能够帮助我们组织和管理组件之间的共享状态。...通过合理配置和组织Vuex，我们可以有效地管理复杂应用的状态，提高开发效率。
Vuex--项目全局变量（非父子组件之间的通信）
老程的博客
10-28 301
需求简介：项目是 vue 项目，需要用到一个全局变量，其他组件都可读取和更新它；使用的 Vuex 解决； 首先 store 文件夹 index.js 通过vuex 五大属性设置好 全局对象或变量 <!-- store-index.js --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: {}, ab.
Vue3下使用Vuex(store)实现响应式全局变量
热门推荐
fatfish517的博客
03-21 2万+
本文记录了如何使用vuex建立响应式全局变量，内容有：按类别建立多模块、如何引入、使用、如何不借助第三方工具在localStorage、sessionStorage中实现数据持久化，以及vuex store state的赋值问题。
通过Vuex设计全局变量
weixin_43825727的博客
10-21 865
在项目中和router文件夹同级建立store文件夹，新建index.js文件 添加以下代码： （前提是已经npm过vuex，或者项目已经有该环境。） import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { openDialog: false, }, mutations: { openDialogFunc(state) {
Vue 应用系列笔记 （五） 引入vuex 做全局变量管理
CoffeeAndIce的博客
04-28 806
做着做着的时候，单个页面也好，总会遇到重复利用，需要全局操作运算的变量，这时候引入官方推荐核心组件VUEX，其实是为了优化前面几点不方便也好，找个理由引用下，不然怎么扯下去 ...
Vuex 全局配置
王正魁
11-23 450
组建或者页面中，访问state的一种方式。
vue设置全局变量：让你的数据无处不在！
Shids_的博客
09-11 1万+
vue设置全局变量：让你的数据无处不在！
uniapp设置全局变量
最新发布
07-04
在uni-app中，设置全局变量通常用于保存应用程序的配置信息或状态，以便在整个应用的不同页面和组件间共享。以下是如何在uni-app中设置全局变量： 1. 使用App.vue中的`data`属性：App.vue文件是每个uni-app项目都有的，你可以在这里定义全局数据（例如`store`对象）。 ```html <template> <!-- ... --> </template> <script> export default { data() { return { globalVariable: '默认值', // 可以为对象或任意类型 }; }, onShow() { // 初始化变量或更新全局状态 } }; </script> ``` 2. Vuex：如果需要更复杂的管理状态，可以使用Vuex作为状态容器，它提供了分层的模块化结构，使全局状态更加易于管理和复用。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { globalValue: '默认值', }, mutations: { updateGlobalValue(state, newValue) { state.globalValue = newValue; }, }, }); export default store; ``` 3. 全局事件总线（Event Bus）：当不需要使用状态管理工具时，可以通过自定义事件总线进行通信，将全局变量视为事件的参数传递。 在使用全局变量时，记得要在需要的地方监听变化并同步更新。同时，为了保持代码清晰，应避免直接修改全局变量，尽量使用适当的API或方法操作它们。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值