Breaking Vuex actions into multiple files

Question

I'm already using modules to break down my Vuex stores into separate files but an wonder if and how you could break a stores actions into multiple files again?

Some context - I have a Products store in a Vue based Electron application. In this I have a variety of methods to load products from a local db, download products when there are non in the local db and update products in the local db. So as i'm sure you can imagine, my actions in this store file is getting rather large.

So I've tried splitting them into 2 files so far, initial and update, which are then imported and merged, like so:

inital.js:

export default {
    // My methods
}

update.js:

export default {
    // My methods
}

products.js (store module):

import initialActions from './actions/intial';
import updateActions from './actions/update';

const actions = Object.assign(initialActions, updateActions);

Now when I call them, state, dispatch, commit are not defined. So I'm a little stuck and somewhat reluctant to merge them back into the store file.

Structure:

- store
  - modules
    - products
      - products.js
      - actions
        - initial.js
        - update.js

score 2 · Answer 1 · answered Feb 06 '21 at 13:35

2

action1

export default { //methods }

action2

export default { //methods }

actions.js

import 'action1.js'
import 'action2.js'    
export default { ...action1, ...action2 }

Same for mutations and getters.

answered Feb 06 '21 at 13:35

Saulo Calixto

21
2

Sajib Khan · Answer 2 · 2019-01-17T18:28:00.290

1

Try this:

import * as initialActions from './actions/intial';
import * as updateActions from './actions/update';

const actions = Object.assign({}, initialActions.default, updateActions.default);

edited Jan 17 '19 at 18:28

answered Jan 17 '19 at 16:52

Sajib Khan

22,878
9
63
73

No luck, still undefined. For example `loadProducts({ state, commit, dispatch }, params) {`, `state, commit, dispatch` are undefined. – Jam3sn Jan 17 '19 at 17:04
Can you share a working code-pen/jsfiddle? It will be great help to find out the problem. – Sajib Khan Jan 17 '19 at 17:05
Sure, so i've tried to emulate it, but obviously it's running in 1 file rather than multiple: https://jsfiddle.net/n0h1q4po/ – Jam3sn Jan 17 '19 at 17:54

score 1 · Answer 3 · answered Jan 17 '19 at 19:29

It means you have not export those in your store , create index.js in your store folder and export your state, action as required. Also always follow a standard directory structure and then export them.

A typical index.js looks like

import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import state from './state'

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

And a typical standard store directory looks like

Store
├── actions.js
├── getters.js
├── index.js
├── modules
│   ├── app
│   │   ├── mutations.js
│   │   └── state.js
│   └── index.js
├── mutations.js
└── state.js

This way you will never get undefined error. Hope this help !

how should I handle cases when a specific action need to commit a mutation? Separating them in different files will lead to further errors...? — Botea Florin, Mar 31 '19 at 09:39
Am not saying that you have to Separate actions in different files , but it's only convention when you know how your files get exported. For example in https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/store/actions.js HackerNews in vue..you can see for getting user. In code we can dispatch this like :- store.dispatch('FETCH_USER', { id }) — Deepender, Apr 03 '19 at 19:30

Breaking Vuex actions into multiple files

3 Answers3