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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
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动态创建Flash动画
2006/10/09 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
Js和VUE实现跑马灯效果
2020/05/25 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
简单的项目建议书模板
2014/03/12 职场文书
2014年实习期工作总结
2014/11/27 职场文书
停发工资证明范本
2015/06/12 职场文书