Vuex Cheat Sheet

Imports and Mappers

    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'
    import { mapGetters } from 'vuex'

    computed: {
      ...mapState(['user', 'age']
      ...mapGetters([ 'news' ])
      ...mapState('teamModuleName', ['id', 'name', 'picture', 'bio'])
     ),

    methods: {
      decrement() {
        this.DECREMENT({ minus: 2 })
      },

      ...mapMutations(["INCREMENT", "DECREMENT"])
    }

State and Getters

    computed: {
        count () {
          return this.$store.state.count
        }

        doneTodosCount () {
            return this.$store.getters.doneTodosCount
            // or this.$store.getters[Types.getters.GET_FIRST_THING]
        }

        todosById (id) {
            return this.$store.getters.getTodoById(id)
        }
      }

Mutations

    methods: {
        increment(amount) {
          this.$store.commit('increment', amount)
          // or this.$store.commit(Types.mutations.SET_FIRST_THING, amount);
          // or this.$store.commit('SET_CURRENT_USER', { token: 'some-token' })

        }
    }

Actions

    methods: {
      increment(amount) {
        return this.$store.dispatch('increment')
      }

      // dispatch with a payload
      increment(amount) {
       return this.$store.dispatch('incrementAsync', { amount: 10})
      }
    }

Modules

State

    showPanel1() {
      return this.$store.state.helper.showPanel1 ;
    },

Getters

    // Invoking getters from a component
    this.$store.getters['account/isAdmin']

    this.$store.getters['feeders/feedersById'](this.rowData.ac_id);

    // Getter with a parameter
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }

Actions

    this.$store.dispatch('account/login')

Mutations

    this.$store.commit('account/login')

Arrays

// Update item in array, messes order

    [mutationType.UPDATE_CATEGORY] (state, id, category) {
      state.categories = [
         ...state.categories.filter(element => element.id !== id),
         category
      ]
    }

https://stackoverflow.com/questions/52132321/array-of-objects-correct-way-of-updating-an-object-within-the-vue-js-ecosystem

    import Vue from 'vue'

    // find the block's index in the array
    const index = state.contentBlocks.findIndex(block => block.id === contentBlock.id)

    // using Vue.set
    Vue.set(state.contentBlocks, index, contentBlock)

    // using Array.splice
    state.contentBlocks.splice(index, 1, contentBlock)