Home

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 !