vuex loading

by Pooya Parsa

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script type="text/x-template"  id="page-component">
<div>
  <button @click="$store.commit('SET_LOADING', true)">
    Start Loading
  </button>
  <button @click="$store.commit('SET_LOADING', false)">
      Stop Loading
  </button>
</div>
</script>

<script type="text/x-template" id="loading-indicator">
  <div v-if="$store.state.loading">
<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-reload" style="background: none;">
    <g transform="rotate(252 50 50)">
      <path d="M50 15A35 35 0 1 0 74.787 25.213" fill="none" stroke="#68d3e6" stroke-width="12"></path>
      <path d="M49 3L49 27L61 15L49 3" fill="#68d3e6"></path>
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </g>
  </svg>
  </div>
</script>

<div id="app">
  <page-component></page-component>
  <loading-indicator></loading-indicator>
</div>

JavaScript

Vue.component('page-component',{
  template: '#page-component'
})

Vue.component('loading-indicator', {
  template: '#loading-indicator',
})

new Vue({
  el: '#app',
  store: new Vuex.Store({
    state() {
      return {
         loading: false
      }
    },
    mutations: {
      SET_LOADING(state, loading) {
         console.log('Set state to', loading)
         state.loading = loading
      }
    }
  })
})