Vue2 + Vuex3 + Vuex modules + components example

Vue2 + Vuex3 + Vuex modules + components example

HTML

<div id="example">
    <button @click.prevent="changeFilters">
      Update filters
    </button>
    
    <Child></Child>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.6.2/vuex.min.js"></script>

CSS

button {
  background-color: #5588cc; 
  color: white;
  display: nline-block;
  border: 1px solid #4477bb;
  padding: 5px 7px;
  border-radius: 4px;
}

body {
  font-family: Verdana;
}

JavaScript

const moduleA = {
	namespaced: true,
  state: {
    filters: {
      categories: [
        {
          key:"17",
          value: {
            id: "17",
            name:"Obchody a nákupné centrá",
            "subcategories": [
              {
                key: "1224",
                value: {
                  id: "1224",
                  name: "Zverimex"
                }
              }
            ]
          }
        }
      ]
    }
  },
  mutations: {
    updateFilters(state, payload) {
      state.filters = payload
    }
  },
  actions: {
    updateFilters({ commit }) {
      commit('updateFilters', {
        categories: [
          {
            key: "17",
            value: {
              id: "17",
              name: "Stores & shopping",
              "subcategories": [
                {
                  key: "1224",
                  value: {
                    id: "1224",
                    name: "Pet Store"
                  }
                }
              ]
            }
          }
        ]
      })
    }
  },
  getters: {
    getFilters(state) {
      return state.filters;
    },
    getTest() {
    	return state.test;
    }
  }
}

const store = new Vuex.Store({
    modules: {
      a: moduleA,
    }
})


Vue.component('child', {
	props: {
  },
  data: function () {
    return {
    	storeName: 'a',
    }
  },
  computed: {
    filters() {
      return this.$store.getters[this.storeName + '/getFilters'];
    },
  	categories() {
    	return this.$store.getters[this.storeName + '/getFilters'].categories;
    }
  },
  mounted() {
  	console.log(this.categories);
  },
  template: `
  	<div v-if="categories && categories.length" style="margin-top: 15px;">
    	<div v-for="(cat, index) in categories" :key="index">
    		{{ cat.value.name }}
      </div>
    </div>
  `
})

new Vue({
    store,
    el: '#example',
    data() {
    	return {
        storeName: 'a'
      }
    },
    computed: {
    },
    methods: {
    	changeFilters() {
  ...