Hi guys !
I want to display in my app a simple loading screen, the time I load in Vuex store the content of a static JSON file, but when he's loaded, the view is not refreshing ... I could use some help !
The logic is simple : when my Index component is instanciated, I want to call the appInit
action in my store, and when my file static/data.json
is loaded, I set loaded
to true
, causing the view to refresh and show my content.
pages/index.vue
<template>
<div id="app" layout="row">
<div flex="grow" class="loading" v-if="!loaded" layout="column" layout-align="center center">
<div>
<font-awesome-icon icon="spinner" spin />
<img src="/logo.png" />
</div>
</div>
<aside v-bar v-if="loaded">
<div>
<section>
Lorem
</section>
</div>
</aside>
<article flex="grow" v-bar v-if="loaded">
<div>
<section>
Lorem
</section>
</div>
</article>
</div>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
export default {
created () {
this.$store.dispatch('appInit');
},
computed: {
loaded() {
return this.$store.loaded;
}
},
components: {
AppLogo,
FontAwesomeIcon
}
}
</script>
store/index.js
import Vuex from 'vuex'
const createStore = () => {
const store = new Vuex.Store({
state: {
data: false,
loaded: false
},
mutations: {
setData: function (state, data) {
state.data = data;
state.loaded = true;
}
},
actions: {
appInit({ commit }) {
this.$axios.get(`/data.json`).then(function(data){
commit('setData', data);
});
}
}
});
return store;
}
export default createStore
Thanks by advance !
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2512">#c2512</a>)</em></sub></div>