JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<div id="app">
{{pets}}
<div class="col-lg-2" v-for="pic in pets">
<img :src="'https://s13.postimg.org/' + pic + '.png'" v-bind:alt="pic">
</div>
</div>
JavaScript
/* ----- Store ----- */
const state = {
pets: []
};
const mutations = {
SET_PETS (state, response) {
console.log("SET_PETS")
state.pets = response;
}
};
const actions = {
FETCH_PETS: (state) => {
setTimeout(function() {
state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
}, 1000)
}
}
const store = new Vuex.Store({
state,
mutations,
actions
});
new Vue({
el: '#app',
store,
data() {
return {
}
},
beforeMount() {
this.$store.dispatch('FETCH_PETS', {
}).then(() => {
console.log("fetched pets")
})
},
computed:{
pets(){
return this.$store.pets
}
}
});