Vue && Vuex

by abhijeetjain

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 }} {{printSampleLog()}}</div>',
  data() {
    return {
      followers: 0
    }
  },
  created() {
    this.$store.dispatch('getFollowers').then(res => {
      this.followers = res.data.followers
    })
  },
  computed: {
    computedFollowers: function() {
      return this.followers
    }
  },
  methods: {
    printSampleLog() {
      this.$store.dispatch('sampleAction').then(res => {
        this.followers = res.data.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))
      });
    },
    sampleAction(context) {
      context.commit('sampleMutation');
    }
  },
  mutations: {
    sampleMutation() {
      console.log("sample mutation")
    }
  }
})

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