全局方式调用API（不使用vuex）

原创 于 2023-05-29 16:07:48 发布 · 209 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

通过在main.js中调用所有API接口并挂载到Vue.prototype.$API，可以在应用的任何组件中直接调用这些接口，提供便利。这种方法适用于不使用Vuex的情况，使得接口调用更加直观和简单。

第一步 在main.js里面调用所有的API接口，然后挂在Vue.prototype.$API，代码如右侧图

第二步 直接在需要api的界面调用即可

 

 在浏览器即可看见所有的api接口，非常的方便，如果不使vuex来调接口则可以使用上面的方法

逐渐暴躁
关注
【Vue】CompositionAPI 中如何使用 VueX
看花容易绣花难
11-17 1141
CompositionAPI 中如何使用 VueX
全局调用vuex的写法及使用（需传值）-----------登录信息的存储+使用
DcTbnk的博客
05-19 914
全局调用vuex的写法及使用下拉框数据`1.user.js``2.将user.js写入getters.js中``3.触发这个vuex生成数据（dispatch触发actions里的方法）``4.使用vuex数据` 相同点：mutations和action都是用来改变Vuex store的状态的； 不同点：mutations提供的回调函数是同步的； 而actions提供的方法是异步的，此外，actions的方法最终还是通过调用mutations的方法来实现修改vuex的状态的。 dispatch：含有异步操作
调用全局api(接口)
weixin_30905981的博客
01-29 618
// 配置API接口地址 // var root = process.env.API_ROOT import Vue from 'vue'; import Vuex from 'vuex'; import store from '../vuex/store' Vue.use(Vuex); var root function url_check () { //域...
vue3在main.js做请求
范天缘的博客
01-06 1996
有时候需求进入页面调用用户权限接口 这时候在main.js请求是最好的 main.js请求写法 const getUpdateTime = (async()=>{ let params = {} const res = await $http(params,'getUpdateTime'); }) getUpdateTime()
vue项目main.js使用方法
m0_62823653的博客
05-19 2万+
第一部分：main.js文件解析 src/main.js是入口文件，主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础配置 import Vue from 'vue' import App from './App.vue' //引入已经配置好的路由和vuex import router from './router' import store from './store/store' // 导入less(样式的导入例子，cs
vue调用后端接口
qq_53943932的博客
04-08 1万+
1、在config文件下的index.js文件的proxyTable:{ }中写入 '/api': { target: 'http://localhost:8088/',//此处可以换成自己需要的地址 changeOrigin: true, pathRewrite: { '^/api': '/' } } 2、在main.js中写入 Vue.prototype.HOST = "/api" 3
uniapp封装公共js并在main.js里全局绑定并调用
xioxi
06-22 6765
公共文件：common/api.js // 请求头 var rqUrl = '域名' // 请求处理 function requst(url, data, post_get) { return new Promise((resolve, reject) => { uni.request({ url: this.rqUrl + url, method: post_get || "GET", data: data || {}, header: { 'content-t
vuex全局变量的几种实现方式
04-10
在需要异步操作（如API调用）时，可以使用`actions`来处理。这样可以确保状态变更不会在同一个事件循环中发生，避免了可能的并发问题。 ```javascript this.$store.dispatch('asyncLoadGlobalVariable') ``` 4....
【Vue3实践】（七）Vue中的全局状态管理 使用Vuex或Pinia管理按钮权限
积木成林，聚沙成塔
03-29 2114
由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录，同时也会提到一些功能在实际生产环境中的使用。《Vue3搭建、路由配置与基本语法》《响应式变量、双向绑定、计算属性、监听器》《优雅使用VUE3 组件特性：组件定义、组件注册、事件监听、双向绑定》《优雅使用VUE3 组件特性：属性透传、依赖注入、组件插槽、动态组件》《生命周期函数、组合式函数的使用》
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
10-16
3. vuex存储：需要掌握使用vuex进行状态管理的方法，特别是在前端项目中存储全局状态。 内容中所包含的知识点： 1. 微信小程序登录流程 - 制作授权登录框：通过前端组件引导用户进行授权操作。 - 使用 uni.login ...
如何在main.js中调用接口并且访问vuex中的数据
亚洲的博客
05-24 4832
一般情况下，都是在router.beforeEach((to, from, next) => {}中使用。 1、调用接口，能在这调用接口的一般都是使用get来获取数据 直接 Axios.get(接口).then(res=>{}).catch(err=>{}),就可以调用接口了 2、访问vuex中的数据 想要获取或操作vuex中的数据， 获取数据： id: store.state.id 操作数据： store.state.id=res.data.data.id ...
Vue项目初始化
Azbtt的博客
12-10 1328
初始化vue项目
Vue3全局API上篇
Sapling
09-27 1499
创建一个应用实例。第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props声明变量app为一个应用实例。
vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法
白鲸鱼的博客
11-07 1万+
以计算器为案例 Calculator.html <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <hea
vue项目中，main.js,App.vue,index.html如何调用
每天多一点干货
10-31 1万+
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块
Vue.js访问接口数据
至情相遇的博客
08-08 6676
在新安装的vue-cli中,并没有’dev-server.js’以及’dev-client.js’文件,取而代之的是webpack.dev.conf.js ,所以我们需要在webpack.dev.conf.js 文件中开始进行相关的数据获取: 学习并使用饿了么数据接口 其中:./data.json是在项目根目录下的json文件(数据接口) 怎么在服务开启的时候接口数据也对应做好:使用的是d...
vue调用接口
热门推荐
yumu的博客
06-26 3万+
真的可以用 1.最简单的一种方法 安装axios,npm install --save axios 在main.js中引入 import axios from '.axios' Vue.prototype.$axios=axios ① //如果Vue.prototype.$ajax=axios ，调用时写法如下② 在想要调用接口数据的页面中,get后面的地址是你的接口地址 ...
如何通过js调用接口
qq_39110534的博客
08-06 8422
例如一个接口的返回值如下：var returnCitySN = {"cip": "221.192.178.158", "cid": "130100", "cname": "河北省石家庄市"};我们的js可以这么写 document.write('IP地址:' + returnCitySN["cip"] + ', 城市编码:' + returnCitySN[&q
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值