Vue2 + Vuex3 + Vuex modules + components example

Vue2 + Vuex3 + Vuex modules + components example

by Vladimír Čamaj

HTML

<div id="example">
    <button @click.prevent="changeFilters" style="background-color: #7777ff; color: white">
      Update filters
    </button>
    
    <Child :filters="filters"></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>

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: {
  	filters: null,
  },
  data: function () {
    return {
      test: ['aaaaa', 'bbbbb']
    }
  },
  computed: {
  	categories() {
    	return this.filters.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: {
      filters() {
          return this.$store.getters[this.storeName + '/getFilters'];
      },
    },
    methods: {
    	changeFilters() {
     ...