Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie Webpack+vuex+axios-Technologien, um domänenübergreifende Anforderungsdaten zu implementieren (ausführliches Tutorial)

Verwenden Sie Webpack+vuex+axios-Technologien, um domänenübergreifende Anforderungsdaten zu implementieren (ausführliches Tutorial)

亚连
亚连Original
2018-06-01 09:50:261911Durchsuche

In diesem Artikel werden hauptsächlich domänenübergreifende Anforderungsdaten von Webpack + Vuex + Axios vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

In diesem Artikel wird der Beispielcode für domänenübergreifende Anforderungsdaten von webpack+vuex+axios vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Verwenden Sie vue-li, um das Webpack-Projekt zu erstellen und ändern Sie die Datei bulid/config/index Komponente:

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'
    } 
   }
  },
 }

innerhalb der Komponente. Wenn Sie domänenübergreifend

arbeiten möchten, legen Sie es in main.js fest:

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)
 })
}

Legen Sie es innerhalb der Komponente fest:

<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 &#39;vuex&#39;;
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(&#39;GET_IN_THEATERS&#39;)
  },
  mounted () {
  }
}
</script>
<style lang="scss">
@import "./../../assets/reset.scss";
@import "./../../assets/main.scss";
.movie-page{
  padding: 0 rem(40);
}
</style>

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue.js-Implementierung des zufälligen Ziehens von Bildern

Lösen von Vue Ändern Sie das Array wie folgt Tabelle, das Problem, dass die Seite nicht gerendert wird

Vue2.0 Axios Cross-Domain-Rendering-Problemlösung

Das obige ist der detaillierte Inhalt vonVerwenden Sie Webpack+vuex+axios-Technologien, um domänenübergreifende Anforderungsdaten zu implementieren (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn