# Mapping state from multiple namespaced vuex modules to a vue component

Imagine you you have a `.vue` component. In the component you need 3 different kinds of data.
- Data about the logged in user
- All projects available to the user
- All employees in the company which the user belongs to.

The data is split across 3 different vuex modules, one for each resource, and all of them are namespaced for good measure.

*store/user.js*

const state: {
  user: {},  
  namespaced: true,
};

*store/employees.js*

const state: {
  employees: [], 
  namespaced: true,
}

*store/projects.js*

const state: {
  projects: [],
  namespaced: true,
};

Now, how would you go about making this data available to your component?

### 1. Naively mapping the data

*components/App.vue*

import { mapState } from 'vuex'

export defeault {
  computed: {
    ...mapState({
      projects: state => state.projects.projects,
      employees: state => state.employees.employees,
      user: state => state.user.user
    })
  },
}

I think this looks very nice. For a small project you are done.

As a project grows bigger though, and you work with a bigger team of people, it becomes more and more important to have your dependencies in the code be explicit. This helps with documenting the code for better understanding which parts of the code depend on each other, but also gives better error messages if your names are wrong.

A common pattern to solve this problem, is to use named constants.

### 2. Import named constants

You define constants in your store, for the component to import.

*store/user.js*

const state: {
  user: {},  
  namespaced: true,
};
export const user = 'user';

*store/employees.js*

const state: {
  employees: [], 
  namespaced: true,
}
export const employees = 'employees';

*store/projects.js*

const state: {
  projects: [],
  namespaced: true,
};
export const projects = 'projects';

*components/App.vue*

import { mapState } from 'vuex'
import { user } from '../store/user.js';
import { employees } from '../store/employees.js';
import { projects } from '../store/projects.js';

export defeault {
  computed: {
    ...mapState([
      user,
      employees,
      projects,
    ]),
  },
};

Yay! Not too bad.

You now have made the connection between the component and the stores explicit. If the store changes, eslint will tell you that your imports are wrong. You also can jump to the store (go to definition) by right-clicking on any symbols imported from the store.

Except!

This code will not work. Remember - our modules are namespaced - so we have to write some code for that.

### 3. Specify namespaces

*store/user.js*

const state: {
  user: {},  
  namespaced: true,
};
export const user = 'user';
export const userspace = 'user';

*store/employees.js*

const state: {
  employees: [], 
  namespaced: true,
}
export const employees = 'employees';
export const employeespace = 'employees';

*store/projects.js*

const state: {
  projects: [],
  namespaced: true,
};
export const projects = 'projects';
export const projectspace = 'projects';

*components/App.vue*

import { mapState } from 'vuex'
import { user, userspace } from '../store/user.js';
import { employees, employeespace } from '../store/employees.js';
import { projects, projectspace } from '../store/projects.js';

export defeault {
  computed: {
    ...mapState(userspace, [user]),
    ...mapState(employeespace, [employees]),
    ...mapState(projectspace, [projects]),
    ]),
  },
};

Wups. This whole thing about being explicit starts to cost more than it is worth.

All that extra code!

Maybe you wanna go back using the first example, and call it a day, but just stick with me for a little longer. It will be worth your time.

### 4. The createNamespacedHelpers - helper

Vuex has this helper-function which is supposed to make it easier to work with namespaced vuex modules.

*store/user.js*

import { createNamespacedHelpers } from 'vuex';

const state: {
  user: {},  
  namespaced: true,
};
export const user = 'user';
export const { mapState: mapUserState } = createNamespacedHelpers('user');

*store/employees.js*

import { createNamespacedHelpers } from 'vuex';

const state: {
  employees: [], 
  namespaced: true,
}
export const employees = 'employees';
export const { mapState: mapEmployeeState } = createNamespacedHelpers('employees');

*store/projects.js*

import { createNamespacedHelpers } from 'vuex';

const state: {
  projects: [],
  namespaced: true,
};
export const projects = 'projects';
export const { mapState: mapProjectState } = createNamespacedHelpers('projects');

*components/App.vue*

import { user, mapUserState } from '../store/user.js';
import { employees, mapEmployeeState } from '../store/employees.js';
import { projects, mapProjectState } from '../store/projects.js';

export defeault {
  computed: {
    ...mapUserState([user]),
    ...mapEmployeeState([employees]),
    ...mapProjectState([projects]),
    ]),
  },
};

You aren't happy. Yes, you got one less import, and you don't have to pass in the namespace as an argument to the mappers anymore.

Still you are dragging around 3 mapper-helper-functions.

Hmm.

Why does the component have to know about mappers, constants and namespaces?
All it wants is some state.

Can we be more direct here?

Turns out you can.

### 5. Introducing mapState in the store

Let's give it a try.

*store/user.js*

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('user');

const state: {
  user: {},  
  namespaced: true,
};
export const { user } = mapState(['user']);

*store/employees.js*

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('employees');

const state: {
  employees: [], 
  namespaced: true,
}
export const { employees } = mapState(['employees']);

*store/projects.js*

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('projects');

const state: {
  projects: [],
  namespaced: true,
};
export const { projects } = mapState(['projects']);

*components/App.vue*

import { user } from '../store/user.js';
import { employees } from '../store/employees.js';
import { projects } from '../store/projects.js';

export defeault {
    computed: {
      user,
      employees,
      projects,
    ]),
  },
};

Ahh! Now we are back to something simple in the component again. In fact, it has never been simpler to be a component.

It does not have to care about constant strings, namepsaces and mappers. It can get straight to the point. Straight to the delicious state - not just any state - but state that is ready-made to be plugged right into the computed-object without giving it any further thought.

Cool, right?

### 6. One final bigger example

This pattern also works for actions and getters.

*store/user.js*

const { createNamespacedHelpers } from 'vuex';
const { mapState, mapGetters, mapActions } = createNamespacedHelpers('user')

const state = {
   user: {
     id: null,
     company: {
       id: null,
     },
   },
   friends: [],
}

const getters = {
  userCompany: state => state.user.company,
}

const mutations = { /* MUTATE STATE HERE */ }
const actions = {
  createUser: (state, payload) => { /* code */ },
  updateUser: (state, payload) => { /* code */}, 
  destroy: state => { /* code */ },
  logout: state => { /* code */ },
  login: state => { /* code */ },
}

export const { 
  user, 
  friends 
} = mapState([
  'user', 
  'friends'
]);

export const { 
  userCompany 
} = mapGetters([
  'userCompany'
]);

export const {
  createUser,
  updateUser,
  deleteUser,
  logout,
  login,
} = mapActions([
  'createUser',
  'updateUser', 
  'deleteUser',
  'logout', 
  'login',  
 ]);

export default {
  state,
  getters,
  mutations,
  actions,
};

*components/User.vue*

import { 
  user,
  friends,
  userCompany,
  createUser, 
  updateUser, 
  deleteUser 
} from '../store/user';

export default {
  computed: {
    user,
    friends,
    userCompany,
  },
  methods: {
    createUser,
    updateUser,
    deleteUser,
  },
}