CODEWITHSUNDEEP
vue.jsvuexstorevuex-modules
codebot
codebot

Reputation: 717

Correct syntax for multiple modules in vuex

Vue and vuex begginer. I am trying to set a single store with multiple modules in vuex.

The folder structure is

store (folder)
  index.js
  modules (folder)
    hoodies.js
    shoes.js

My index.js has 

import Vue from 'vue'
import Vuex from 'vuex'
import hoodies from'./modules/hoodies';
import shoes from'./modules/shoes';

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        hoodies
        ,shoes
    }
})

Inside hoodies.js and shoes.js I have the same structure, the difference is the word "shoes" or "hoodies"

import axios from 'axios'

const state = {    
    shoes:[]
};

const getters = {
    allShoes : state => state.shoes    
};

const actions = { 
    async fetchShoes({commit}){ //.... 
}

const mutations = {
    setShoes:(state, shoes) => (state.shoes = shoes),
}

export default{
    namespaced: true,    
    state,
    getters,
    actions, 
    mutations
};

I want to use shoes and hoodies in the same component. I am confused because I dont know if this is the correct syntax and a lot of tutorials do not explain how to do this.

So, I am trying like so.

import { mapGetters, mapActions } from 'vuex'; 

methods:{
          ...mapActions('./store/modules/shoes', [ 'fetchShoes' ]),
          ...mapActions('./store/modules/hoodies', [ 'fetchHoodies' ]), 
          comboboxChange(){
            this.fetchHoodies();
          }
},
created(){
  this.fetchShoes(); 
}

I get no errors in the console. But the browser console says [vuex] module namespace not found in mapActions(): ./store/modules/shoes/

Please help me debug this, a simple solution goes a long way. I dont know what to do. Thanks

Upvotes: 1

Views: 4307

Answers (1)

DrofX
DrofX

Reputation: 73

First problem I see is that you import your modules as "vessels" and "charts", so you need to register that names in module. I recommend to change your imports like this:

import Vue from 'vue'
import Vuex from 'vuex'
import hoodies from'./modules/hoodies';
import shoes from'./modules/shoes';

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        hoodies,
        shoes
    }
})

You don't need getters to return exact state values, you can reach state directly from component. Since you are using namespaced modules you get state value in component like this: this.$store.state.shoes.shoes

Getters you usually use when you need some computed value(s) from state.

Upvotes: 3

Related Questions