Vue && Vuex

by HYEONGJINKIM

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <followers></followers>
</div>

JavaScript

Vue.component('followers', {
  template: '<div>Followers: {{ computedFollowers }}</div>',
  data() {
  	return { followers: 0 }
  },
  created () {
    this.$store.dispatch('getFollowers').then(res => {
    	this.followers = res.data.followers
    })
  },
  computed: {
  	computedFollowers: function () {
    	return this.followers
    }
  }
});

const store = new Vuex.Store({
  actions: {
    getFollowers() {
      return new Promise((resolve, reject) => {
        axios.get('https://api.github.com/users/octocat')
          .then(response => resolve(response))
          .catch(err => reject(error))
      });
    }
  }
})

const app = new Vue({
	store,
  el: '#app'
})