[Vuejs]-How to use shorter path to get vuex contents?

by

3👍

✅

I always separate vuex into separated modules. For instance if you have store for foo module. I will create file named foo.js which contains

const fooModule = {
  state: {
    foo: {
      bar: {
        tar: {
          info: 42
        }
      }
    }
  },
  getters: {
    info (state) {
      return state.foo.bar.tar.info
    }
  },
  mutations: {
    setInfo (state, payload) {
      state.foo.bar.tar.info = payload
    }
  },
  actions: {
    getInfo ({commit}, payload) {
      commit('setInfo', payload)
    }
  }
}

export default fooModule

Then in your main index vuex, import the module like this way

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

import fooModule from './foo.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    fooModule
  }
})

export default store

Then if you wanna get info, you just write your code like this

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getInfo'
    ])
  }
}
👤Jefry Dewangga

1👍

@jefry Dewangga has the the right idea but introducing mapGetters is unnecessary.

VueX by default includes namespacing for modules which allows us to load multiple modules into a store and then reference them with or without namespacing them and it’ll figure the rest out.

For Instance if we have the structure of 

|-- store
  |-- Modules
    |-- module1.js
    |-- module2.js
    |-- module3.js
|-- index.js

We can use index in such a way to bind all of our modules into our Vuex store doing the following: 

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

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

An example of our module1 could be:

const state = {
    LoggedIn: true
}

const mutations = {
    LOGIN(state) {
        state.LoggedIn = true;
    },
    LOGOFF(state) {
        state.LoggedIn = false;
    }
}

const actions = {}

export default {
    state,
    mutations,
    actions
}

This in turn gives us the ability to say:

this.$store.commit('LOGIN');

Note that we haven’t used any namespacing but as we haven’t included any duplicate mutations from within our modules were absolutely fine to implicitly declare this.

Now if we want to use namespacing we can do the following which will explicitly use out module:

this.$store.module1.commit('LOGIN');

MapGetters are useful but they provide a lot of extra overhead when we can neatly digest out modules without having to continuously map everything, unless well we find the mapping useful. A great example of when MapGetters become handy is when we are working many components down in a large project and we want to be able to look at our source without having to necessarily worry about the frontend implementation.

👤li x

Leave a comment