Vue && Vuex

by Richard Ayotte

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>projects: {{ $store.state.projects }}</div>',
  data() {
  	return { 
		
    }
  },
  
  
  mounted () {
    this.getItems();
  },
        
        
  methods: {
     getItems () {
      axios.get(`https://jsonplaceholder.typicode.com/posts`)
        .then(response => {
        console.log(response)
        this.$store.dispatch('updateProjectsAction', response.data.items)
      });
    }
  },
  
  
});

const store = new Vuex.Store({

  state: {
	  projects: {}
  },

	mutations: {
  
	  UPDATE_PROJECTS: (state, payload) => {
        state.projects = payload
    }
    
  },
  
  actions: {
  
  	updateProjectsAction (context, projects) {
        context.commit('UPDATE_PROJECTS', projects)
    },
  
  }
  
  
})

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