Vue.js example
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-resource/dist/vue-resource.min.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
{{ $store.state.photos }}
</div>
JavaScript
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
photos: 'photo'
},
mutations: {
addPhotos (state, photos) {
state.photos = photos;
}
}
})
new Vue({
el: '#app',
store: store,
mounted: function () {
var vm = this;
Vue.http.get('https://jsonplaceholder.typicode.com/photos')
.then(function (res) {
// Working because calling a mutation
// vm.$store.commit('addPhotos', res);
// Not working because not action addPhotos exists
// Open the browser console and look at the error
vm.$store.dispatch('addPhotos', res);
});
}
})