A New Way to Write Vuex Module

What I think is Wrong with Vuex Module?

Into Vuex’s documentation page, to dispatch a module’s action we had to pass the module name and the action name as action type, like:

store.dispatch(‘module/action’)
  • Wich argument that action is expecting?
  • Where is this action implementation?

My Proposal to Solve Those Problems

My package vuex-tools solve it and also, make it easier to create modules. take a look:

  • Easy goto implementation just by vscode control+clicking into the function name.
  • Easily find all uses of an action;
  • Type for actions arguments and mutations also getters (more about getter later);
  • All state type in just one place.
const getSortedItems = moduleBuilder.getter<Item[]>(
'sortedItems',
(state) => [...state.items].sort(a, b) => a.order - b.order
);

// vue component
{
computed: {
sortedItems() {
getSortedItems(this.$store.getters)
}
}
}
  • Remove from beta;
  • Refactor the code to a more readable one ( createModule is a mess I know);
  • Improve DOCS with more examples;
  • 100% test coverage and add more cases;
  • Test with Vuex plugin;
  • Be referenced into Vuex documentation;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matheus Ale da Silva

Matheus Ale da Silva

I am A full-time coder and sometimes I go around to do what normal people do.