Trying to create a megastore - Reactivity is lost

[jenstornell]

Background

I use many small stores, one for each task. One task includes lots of states, getters and actions.

When the project is growing I've noticed that I would like to have access to it all through one big object. Therefor I've created a "megastore".

megastore.js

The things I gain with a megastore is:

1. Less imports in each component.
2. Less hassle when changing paths/names for stores.
3. One object to rule them all. Less to think about.

import { useEdit } from './edit'
import { useCollection } from './collection'

export const megastore = { useEdit, useCollection }

Component

import { megastore } from './megastore'

console.log(megastore)

I can successfully access the stores with something like megastore.useEdit.loaded (where loaded is a state).

Reactivity is lost

When changing a state with a click of a button, the template does not react to it. The reactivity is gone.

Question

1. Is it possible to use this approach and still have reactivity?
2. Are there any big cons with this approach?

[jenstornell]

It does work. I just forgot the () like megastore.useEdit().loaded.