CODEWITHSUNDEEP
vue.jsvuex
Armand
Armand

Reputation: 2827

Correct setup and use of VUEX store mutation-types

I'm developing a Chrome extension using one of the Vue js boilerplates from Github. The default boilerplate setup is as follows:

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

import mutations from './mutations';
import * as actions from './actions';    // all actions are imported as separate vars

Vue.use(Vuex);

export default new Vuex.Store({
    state: {    },
    mutations,
    actions
});

Then in actions.js

import * as types from './mutation-types';

export const setFoo = ({ commit }, payload) => {
    commit(types.SET_FOO, payload);    // SET_FOO is defined in the mutation-types file
};

I think the above approach lacks a fundamental reason why we want to use mutation types file - to avoid retyping the names for mutations and actions.

So instead, I came up with a different approach:

store/index.js

...
import actions from './actions';    // actions are imported as separate functions
...

Then in actions.js

import * as types from './mutation-types';

export default {
    [types.UPDATE_FOO] ({commit}, payload) {
        commit(types.UPDATE_FOO, payload);
    }
}

Then anywhere in the extension, we could also import mutation-types and dispatch actions using const names like so:

store.dispatch(types.UPDATE_FOO, 'some value');

The second approach seems to be more practical in terms of naming and then dispatching/committing our actions/mutations. Or could there be any issues with the latest?

Which of the above, would be generally better practice?

Upvotes: 0

Views: 1407

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

The first approach is preferable, but it's completely up to you. Similar approach is used in official Vuex docs. Refrence

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

// actions.js
actions: {
  checkout ({ commit, state }, products) {
    // save the items currently in the cart
    const savedCartItems = [...state.cart.added]
    // send out checkout request, and optimistically
    // clear the cart
    commit(types.CHECKOUT_REQUEST)
    // the shop API accepts a success callback and a failure callback
    shop.buyProducts(
      products,
      // handle success
      () => commit(types.CHECKOUT_SUCCESS),
      // handle failure
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

Upvotes: 2

Related Questions