首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用VueJs 2的全局数据

使用VueJs 2的全局数据
EN

Stack Overflow用户
提问于 2017-04-03 12:09:58
回答 4查看 34.2K关注 0票数 23

我在VueJS方面相对较新,我不知道如何使某些数据在全球范围内可用。我想保存一些数据,比如API端点、用户数据和从API中检索到的其他数据,每个组件都可以访问这些数据。

我知道我可以用普通的Javascript来保存这个文件,但是我想有一种方法可以用VueJS来实现。我可能可以使用事件总线系统来获取数据,但我不知道如何实现这个系统来满足我的需要。

如果有人能帮我做这件事我会很感激的。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-04-03 12:13:58

创建一个全局数据对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const shared = {
    api: "http://localhost/myApi",
    mySharedMethod(){
        //do shared stuff
    }
}

如果你需要把它暴露在你的Vue上,你可以。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
new Vue({
    data:{
        shared
    }
})

如果没有,您仍然可以在您的Vue或组件中访问它,如果您已经导入了它,或者它们是在同一个页面上定义的。

就这么简单。如果需要,可以将shared作为属性传递,或者全局访问它。

--当你刚开始的时候--没有必要弄复杂的。Vuex经常被推荐,但对于小型项目也常常过分。如果你后来发现你需要它,那么添加它就没那么难了。它也非常适合国家管理,听起来你只是真的想要访问一些全局数据。

如果你想变漂亮,就把它变成一个插件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const shared = {
  message: "my global message"
}

shared.install = function(){
  Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
    get () { return shared }
  })
}

Vue.use(shared);

Vue.component("my-fancy-component",{
  template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})

new Vue({
  el: "#app"
})

现在,您创建的每个Vue和每个组件都可以访问它。这是一个示例

票数 49
EN

Stack Overflow用户

发布于 2019-12-11 22:40:19

您可以使用Store来保存您的应用程序状态。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const store = new Vuex.Store({
  state: {
    userData: []
  },
  mutations: {
    setUserData (state, data) {
      state.userData = data
    }
  }
})

这样,您就可以以store.state的形式访问状态对象,并使用store.commit方法触发状态更改:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
store.commit('setUserData', userData)

console.log(store.state.userData)
票数 3
EN

Stack Overflow用户

发布于 2021-02-08 06:22:50

武美欣

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get $asset() {
        return "Can't change me!";
      }
    }
  }
})

模板

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Vue.prototype.$asset = 'My App'
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43193409

复制
相关文章
【Vuejs】1255- 如何实现全局异常处理?
那么如何实现上面功能呢?本文先简单实现一个异常处理方法,然后结合 Vue3 源码中的实现详细介绍,最后总结实现异常处理的几个核心。
pingan8787
2022/04/14
8230
【Vuejs】1255- 如何实现全局异常处理?
Vuejs 过滤器的使用
过滤器 filters Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由「管道」符号 ‘|’ 指示: 以上来自官方文档解释 我自己的理解: 格式化变量,自定义输出格式。(日期格式处理、字母转变大小写等) 一个转变变量大小写的例子: html: <div id="app"> 小写:{{message}} 大写:{{me
hedeqiang
2019/12/17
9820
VueJs中customRef函数的使用
ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式
itclanCoder
2023/02/26
1K0
VueJs中customRef函数的使用
vuejs + ts + webpack 2 框架的项目实践
作者简介:王鹤,高级前端工程师,隶属于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。目前专注于框架的研究,致力于提升效能,解放生产力。 一、框架的选型 没有什么框架是全能的,都有其
王鹤
2017/08/21
5.5K1
vuejs + ts + webpack 2 框架的项目实践
vuejs+ts+webpack2框架的项目实践
没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。
小时光
2018/01/29
3K0
vuejs+ts+webpack2框架的项目实践
2. spring-boot+thymeleaf(+vuejs)
目前没有发现类似nodejs里面init功能的关于spring-boot的工具,推荐还是去github上面clone一个吧,方便快捷,也可使用start生成,贡献网址http://start.spring.io/。本文旨在这个目的构建一个仓库供以后使用,目标:
MasterVin
2018/08/30
1.6K0
2. spring-boot+thymeleaf(+vuejs)
vuejs+ts+webpack2框架的项目实践
作者简介:王鹤,高级前端工程师,隶属于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。目前专注于框架的研究,致力于提升效能,解放生产力。 一、框架的选型 没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。我们个性化业务是基于移动端的多页面应用。我们综合考虑之后,决定使用vuejs+typescript+webpack2来作为现在和将来的核心主框架,未来的演变也基于此基础。 1、为什么使用vuejs 早些年,前端的MVVM框架呈现爆发式的增长,比如angula
腾讯Bugly
2023/04/02
1.4K0
vuejs+ts+webpack2框架的项目实践
如何使用webpack减少vuejs打包的大小
我在Stanley Black &amp; Decker的工业4.0团队工作。我们的团队最近为Stanley制造工厂创建了相当于App Store的产品。工厂可以访问市场并根据他们在该位置生产的产品选择他们需要的应用程序。这将构建一个自定义构建,将所有这些应用程序捆绑在一起,以便工厂运行。由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。
Jimmy_is_jimmy
2023/05/23
1.8K0
如何使用webpack减少vuejs打包的大小
Android 全局广播的使用
广播作为Android一个重要的组成部分,很多功能的实现都依赖于广播,Android系统在发生一些重要事情的时候都会发送广播(电量变化、网络变化等等)。我们也可以在自己得应用程序中发送广播信息,一些能够接受到特定的广播信息的广播接收器就能够接收到对应的广播信息。进而进行事件处理,那么首先我们来看一下广播的基本使用方法。
指点
2019/01/18
2K0
Android 全局广播的使用
VueJs中的shallowRef与shallowReactive的使用比较
如果传入基本数据类型,那么shallowRef与ref的作用基本没有什么区别,也就是浅层的ref的内部值将会原样的存储和暴露,并不会被深层递归地转为响应式
itclanCoder
2023/02/26
1.2K0
VueJs中的shallowRef与shallowReactive的使用比较
使用hadoop进行大规模数据的全局排序
1. Hellow hadoop~~! Hadoop(某人儿子的一只虚拟大象的名字)是一个复杂到极致,又简单到极致的东西。 说它复杂,是因为一个hadoop集群往往有几十台甚至成百上千台low cost的计算机组成,你运行的每一个任务都要在这些计算机上做任务的分发,执行中间数据排序以及最后的汇总,期间还包含节点发现,任务的重试,故障节点替换等等等等的维护以及异常情况处理。谁叫hadoop集群往往都是由一些平民计算机组成,没事儿罢个工什么的,实在是再寻常不过的事情。 而说其简单,则是因为,上面说到的那些
CSDN技术头条
2018/02/09
1.6K0
使用hadoop进行大规模数据的全局排序
VueJs中如何使用Teleport组件
在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件
itclanCoder
2023/02/26
2.3K0
VueJs中如何使用Teleport组件
vueJs中toRaw与markRaw函数的使用比较
接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用
itclanCoder
2023/02/26
1.3K0
vueJs中toRaw与markRaw函数的使用比较
vuejs之使用axios发送http请求
引入:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
西西嘛呦
2020/08/26
1.4K0
VueJs中如何使用provide与inject
在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方式
itclanCoder
2023/02/26
9110
VueJs中如何使用provide与inject
【译】如何使用webpack减少vuejs打包的大小
Vue建议捆版bundles不超过244KiB。我们只有14个资源,每个资源都超过这个规模。此外,我们有四个入口点也高于建议的大小。以下是我将构建的大小减半的方法。
Jimmy_is_jimmy
2019/08/01
4.2K0
【译】如何使用webpack减少vuejs打包的大小
vueJs中readonly与shallowReadonly函数的使用比较
让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值的数据都不允许修改
itclanCoder
2023/02/26
9120
vueJs中readonly与shallowReadonly函数的使用比较
VueJs 部署到 COS 使用 History 路由
可以!但是在涉及到对URL鉴权的场景下(企业微信),一部分参数会被企业微信丢失,即无法获取完整的 URL,因此必须使用 History 的路由方式。
上山打老虎了
2022/06/15
1.1K0
VueJs 部署到 COS 使用 History 路由
python unittest TestCase间共享数据(全局变量的使用)
使用unittest进行单元测试,可以在创建时候记录下返回的ID,在更新、删除等操作的时候就根据这个新创建的ID进行操作,这就涉及到不同的TestCase之间共享数据。
用户7886150
2021/01/17
9760
【学习】使用hadoop进行大规模数据的全局排序
1. Hellow hadoop~~! Hadoop(某人儿子的一只虚拟大象的名字)是一个复杂到极致,又简单到极致的东西。 说它复杂,是因为一个hadoop集群往往有几十台甚至成百上千台low cost的计算机组成,你运行的每一个任务都要在这些计算机上做任务的分发,执行中间数据排序以及最后的汇总,期间还包含节点发现,任务的重试,故障节点替换等等等等的维护以及异常情况处理。谁叫hadoop集群往往都是由一些平民计算机组成,没事儿罢个工什么的,实在是再寻常不过的事情。 而说其简单,则是因为,上面说到的那些
小莹莹
2018/04/23
9760
【学习】使用hadoop进行大规模数据的全局排序

相似问题

如何在momentJS 2中全局使用VueJS?

425

使用数组- vuejs 2过滤数据

12

如何在单个文件组件中使用VueJS 2全局组件?

25

vuejs配置:使用全局变量?

414

如何在Vuejs 2中声明全局方法/对象?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文