时间:2021-07-01 10:21:17 帮助过:5人阅读
本文介绍了webpack+vuex+axios 跨域请求数据的示例代码,分享给大家,具体如下:
使用vue-li 构建 webpack项目,修改bulid/config/index.js文件
在action.js 中想跨域请求
设置action.js:
组件内使用:
<template> <p class="movie-page"> <ul class="clearfix"> <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item> </ul> </p> </template> <script> 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 () { } } </script> <style lang="scss"> @import "./../../assets/reset.scss"; @import "./../../assets/main.scss"; .movie-page{ padding: 0 rem(40); } </style>
在组件内想跨域
在main.js设置:
在组件内设置:
<template> <p class="movie-page"> <ul class="clearfix"> <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item> </ul> </p> </template> <script> 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') }) } } </script> <style lang="scss"> @import "./../../assets/reset.scss"; @import "./../../assets/main.scss"; .movie-page{ padding: 0 rem(40); } </style>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Vue.js实现图片的随意拖动方法
解决Vue 通过下表修改数组,页面不渲染的问题
vue2.0 axios跨域并渲染的问题解决方法
以上就是利用webpack+vuex+axios这些技术实现跨域请求数据(详细教程)的详细内容,更多请关注Gxl网其它相关文章!