[Vuejs]-Vue component does not update when data is changed external

by

2👍

In your example Store is just plain function (class), without any reactivity (no Vue watchers attached for Store.loaded field).

Only properties inside component’s data are reactive. If you want reactive single store outside of vue components (better for big frontend applications), you should use Vuex

Simple example will be:

App.vue:

<script>
import { mapGetters, mapMutations } from 'vuex';
import store from './store';
import ChildComponent from './components/ChildComponent.vue';

export default {
  store,
  components: { ChildComponent },

  methods: {
    ...mapMutations(['toggleLoaded']),
  },

  computed: {
    ...mapGetters({
      isLoaded: 'isLoaded',
    }),
  }
}

</script>

<template>
  <div id="app">
    <a href="javascript:" @click="toggleLoaded">Toggle loaded</a>

    <h3>Root component: </h3>
    <div>The loaded flag is: {{ isLoaded }}</div>

    <ChildComponent />
  </div>
</template>

components/ChildComponent.vue:

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      isLoaded: 'isLoaded', //accessing to same data, as root through single Vuex state
    }),
  }
}
</script>

<template>
  <div class="hello">
    <h3>Child component</h3>
    <div>The loaded flag is: {{ isLoaded }}</div>
  </div>
</template>

And reactive Vuex store:

store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  loaded: false
};

const getters = {
  isLoaded: state => state.loaded,
};

const mutations = {
  toggleLoaded: (state) => {
    state.loaded = !state.loaded;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  // actions,
  getters,
  strict: true
});

You can find full source of this example on GitHub.

👤hedin

Leave a comment