webpack+vuex+axios 跨域请求数据的示例代码


Posted in Javascript onMarch 06, 2018

本文介绍了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)
 })
}

组件内使用:

<template>
  <div class="movie-page">
    <ul class="clearfix">
      <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item>
    </ul>
  </div>
</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设置:

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

在组件内设置:

<template>
  <div class="movie-page">
    <ul class="clearfix">
      <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item>
      
    </ul>
  </div>
</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue中本地静态图片路径写法
Mar 06 #Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 #Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 #Javascript
React BootStrap用户体验框架快速上手
Mar 06 #Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 #Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 #Javascript
解决vue+webpack打包路径的问题
Mar 06 #Javascript
You might like
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
三个Unix的命令面试题
2015/04/12 面试题
心理健康心得体会
2014/01/02 职场文书
医院检讨书范文
2014/02/01 职场文书
生产部岗位职责范文
2014/02/07 职场文书
cf收人广告词大全
2014/03/14 职场文书
相亲大会策划方案
2014/06/05 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
学校捐书倡议书
2015/04/27 职场文书
房屋维修申请报告
2015/05/18 职场文书
入党后的感想
2015/08/10 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Python图片检索之以图搜图
2021/05/31 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js