利用webpack+vuex+axios这些技术实现跨域请求数据(详细教程)

本篇文章主要介绍了webpack+vuex+axios 跨域请求数据,现在分享给大家,也给大家做个参考。

本文介绍了webpack+vuex+axios 跨域请求数据的示例代码,分享给大家,具体如下:

使用vue-li 构建 webpack项目,修改bulid/config/index.js文件

dev: {  env: require('./dev.env'),  port: process.env.PORT || 8080,  autoOpenBrowser: true,  assetsSubDirectory: 'static',  assetsPublicPath: '/',  proxyTable: {   '/v2': {     target: 'http://api.douban.com',     changeOrigin: true,     pathRewrite: {      '^/v2': '/v2'    }    }  }, }

登录后复制

在action.js 中想跨域请求

设置action.js:

立即学习“前端免费学习笔记(深入)”;

import axios from 'axios'export const GET_IN_THEATERS = ({ dispatch, state, commit}) => { axios({  url: '/v2/movie/in_theaters' }).then(res => {  commit('in_theaters', res.data) })}

登录后复制

组件内使用:

  

    

              
  import {mapState, mapActions, mapGetters} from 'vuex';import MoviesItem from "./movie-item";export default { data () { return { } }, components: { MoviesItem }, computed: { ...mapState({ movie_list: state => { return state.in_theaters.subjects } }) }, methods: { }, created () { this.$store.dispatch('GET_IN_THEATERS') }, mounted () { }}@import "./../../assets/reset.scss";@import "./../../assets/main.scss";.movie-page{ padding: 0 rem(40);}

登录后复制

在组件内想跨域

在main.js设置:

import axios from 'axios'// 将 axios 改写为 Vue 的原型属性,使在其它的组件中可以使用 axiosVue.prototype.$axios = axios

登录后复制

在组件内设置:

  

    

                    
  import MoviesItem from "./movie-item";export default { data () { return { movie_list: [] } }, components: { MoviesItem }, computed: { }, methods: { }, created () { }, mounted () { this.$axios.get('/v2/movie/in_theaters').then(res => { this.movie_list = res.data.subjects }, res => { console.infor('error') }) }}@import "./../../assets/reset.scss";@import "./../../assets/main.scss";.movie-page{ padding: 0 rem(40);}

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue.js实现图片的随意拖动方法

解决Vue 通过下表修改数组,页面不渲染的问题

vue2.0 axios跨域并渲染的问题解决方法

以上就是利用webpack+vuex+axios这些技术实现跨域请求数据(详细教程)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2752450.html

(0)
上一篇 2025年3月8日 06:23:34
下一篇 2025年3月8日 03:52:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论