Axios vue.js ajax example

Request dummy data with axios & vue.js

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<div id="app">
  <div v-if="loading">
    loading...
  </div>
  <div v-else>
    <ul>
      <li v-for="post in posts">
        <h1>
          {{post.title}}
        </h1>
        <p>
          {{post.body}}
        </p>
      </li>
    </ul>
  </div>
</div>

Babel + JSX

const URL = 'https://jsonplaceholder.typicode.com/posts';

const store = new Vuex.Store({
	state: {
  	posts: [],
    loading: true
  },
  actions: {
  	loadData({commit}) {
    	axios.get(URL).then((response) => {
    	// console.log(response.data, this)
        commit('updatePosts', response.data)
        commit('changeLoadingState', false)
    	})
    }
  },
  mutations: {
  	updatePosts(state, posts) {
    	state.posts = posts
    },
    changeLoadingState(state, loading) {
    	state.loading = loading
    }
  }
})

new Vue({
	el: '#app',
  computed: Vuex.mapState(['posts', 'loading']),
  store,
  created() {
  	//console.log(this.$store)
  	this.$store.dispatch('loadData') // dispatch loading
  }
})

/*
	//example with-out vuex
  
new Vue({
	el: '#app',
	data() {
  	return {
    	loading: true,
      posts: [] // add posts here so reactivity is working, also undefined would be OK
    }
  },
  created() {
  	//this.loading = true --> not needed already set in data
  	axios.get(URL).then((response) => {
    	// console.log(response.data, this)
      this.posts = response.data
      this.loading = false
    })
  }
})

*/