How to config Vuex Store with multi file?

[Yuom Theara]

Example I base on Todo feature

/features/todos/store
  index.js
  a.js
  b.js
  c.js
-------------------
// index.js
export { default } from './todos';

How to import a, b, c....

[Chris Visser]

In your store index for todos:

export { default } from './todos';
export { default as A } from './a';
export { default as B } from './b';
export { default as C } from './c';

In ./src/app/store/index.js:

import todos, { A, B, C } from '../features/todos/store';

[Yuom Theara]

How to config its on main index.js

import user, { plugin as UserPlugin } from '../features/auth/store';
import notifications from '../features/notifications/store';
import todos from '../features/todos';

// import todos, { A, B, C } from '../features/todos/store';

export default {
  plugins: [UserPlugin], // Connects Meteor's reactive user state to the store using Tracker

  modules: {
    user,
    notifications,
    todos, ?????????????????
  },
};

[Yuom Theara]

Or

modules: {
    user,
    notifications,
    todos,
    A,
    B
    ...
  },

[Chris Visser]

Like the below one. Its just like the normal Vuex modules

[Yuom Theara]

So it mean that We alway use difference module name .state.todo, .state.A., .state.B....,
But I would like to use only todo module name only, bc all of these store is in Todo Feature
Eg. state.todo.count, .dispatch('todo/myAction')......

[Yuom Theara]

Could you help me again?

[Chris Visser]

Sure :). The below snippet illustrates how you could import all stores from the todos feature using a wildcard. Then you can use the spread operator to assign them all to the modules object of your main store.

Keep in mind that you will have to export all the stores from the features/todos/store/index.js file.

import * as todoStores from '../features/todos/store';

modules: {
    user,
    notifications,
    ...todoStores,
},

[Yuom Theara]

very thanks, I will try