Vuex Component Use Examples

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">

  <vuex-demo inline-template>
    <div>
      {{filters}}  
    </div>
  </vuex-demo>

</div>

Babel + JSX

const filtersModule = {
  namespaced: true,
  state: {
    currFilters: {},
  },

  // @params state, getters, rootstate
  getters: {
    getAllFilters: state => {
      let ftemp = [];
      Object.keys(state.currFilters).forEach((type) => {
        ftemp.push(type);
      });
      console.log('filters in store...');
      console.log(ftemp);
      return ftemp;
    },
  },
  // @params state
  mutations: {
    addFilter: (state, filter) => {
      const currFilters = state.currFilters;
      currFilters[filter.type] = filter;
      console.log('mutated');
      console.log(state.currFilters);
    },
  },
};

const store = new Vuex.Store({
  modules: {
    filters: filtersModule,
  },
})

Vue.component('vuex-demo', {
  data () {
    return {
      filters: [],
    };
  },
  mounted() {
    this.addFilter({'type': 'type1', 'val': 10});
    this.addFilter({'type': 'type2', 'val': 20});
    console.log('mounted...');
    console.log(this.getAllFilters);
    this.filters = this.getAllFilters();
  },
  watch: {
    getAllFilters(val) {
      console.log('getAllFilters changed');
      console.log(val);
    },
  },
  methods: {
    ...Vuex.mapMutations('filters', [
      'addFilter',
    ]),
  },
    computed: {
      ...Vuex.mapGetters('filters', [
        'getAllFilters',
      ]),
    },
    }
    );

    const app = new Vue({
    el: '#app',
    store,
  })