Vuex: Examples -> Shopping Cart -> Store Modules - Actions not within module

[webnoob]

I feel the example of dealing with stores is a little misleading. After reading the docs, it's advising a modular approach for larger applications. The store example is Ok but you have a module for cart and a module for products but at a base level, you have actions that are specific to each of those. i.e getAllProducts should be an action set against modules/products.js module.

Would the example not serve better if everything that belonged together was in the same modules?

[ktsn]

Yes, the actions should be in each module.
They are in root because the examples are just migrated from 1.0 version.

[webnoob]

Ok, thanks for confirming. I'll try and do a PR when I get time.

[alvarengathomas]

I followed the Shopping Cart example in the beginning of my projects and my actions.js file got too big, so I divided the actions inside each specific module, but the documentation is not clear of how can I map the actions that are inside modules in my components, can anyone help me?

Folder Structure:
store/
--modules/
----user/
------actions.js
------getters.js
------index.js
------mutations.js
------types.js

//index.js
import * as state from './state';
import * as actions from './actions';
import * as getters from './getters';
import * as mutations from './mutations';

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

We are prefixing the actions name with 'user' and mapping then in the components like this:

<script>
import { mapActions } from 'vuex';

export default {
  methods: mapActions([
    'userAdd',
  ]),
};
</script>

Anyone know a better alternative to map the actions that are inside modules in the components?

[dayvsonlima]

You can use namespace this way

import { mapActions } from 'vuex';

export default {
  methods: mapActions([
    'add',
  ], 'user'),
};
</code>

[ktsn]

Please don't hijack the issue by asking usage/support question. We encourage you to use gitter or official forum to ask such question.

@dayvsonlima That syntax is under proposal yet...

[vitornogueira]

Nice! Tks @ktsn. So, where is the vuex gitter or official forum link? Or we should ask in the vue forum/gitter?

[ktsn]

Yeah, please use vue's :)
gitter: https://gitter.im/vuejs/vue
forum: http://forum.vuejs.org/

[zppro]

userAdd is what you defined in you modules/user/actions.js,but you should promise not get the action name conflict

[ktsn]

Fixed via #399