· 1 min read

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)
Share:
Back to Blog

Related Posts

View All Posts »
How to Connect to a DigitalOcean Managed Database When Your IP Address Changes

How to Connect to a DigitalOcean Managed Database When Your IP Address Changes

If you're working with a DigitalOcean managed database from your local machine, you've probably run into this frustrating scenario: everything works perfectly one day, then suddenly your database connection times out. The culprit? Your IP address changed, and it's no longer in the database's trusted sources list.

Paging In .Net Core with C# and Linq

Paging In .Net Core with C# and Linq

Almost every medium to large site requires some sort of paging through lists of information. The advantage of paging is that you only need to bring back a limited result set.