createStore

createStore

createStore, State, Getters and Actions

createStore({ state, getters, actions }) from the framework7 package builds a framework-independent state container, passed to the app as new Framework7 572,986 ({ store }) (The Constructor). State is a plain object; getters are functions of { state }; actions receive { state, dispatch } and a payload, may be async, and are called with store.dispatch(name, payload), which always returns a Promise. BookNest's store has books, cart and filters in state, six getters and five actions.

The source (modules/store/create-store.js) is 131 lines. store.state is a Proxy: its get trap records which top-level keys a getter reads, and its set trap re-runs every getter that read the key being set and hands the new value to that getter's subscribers. Reading store.getters.cartCount returns { value, onUpdated } and subscribes it. The Proxy sees only top-level assignments, which this console session shows:

What notifies a getter, in the DevTools consoleJavaScript

const store = app.store;
const count = store.getters.cartCount; // { value, onUpdated }
count.onUpdated((n) => console.log('cartCount ->', n));
await store.dispatch('addToCart', 3);
store.state.cart.push({ id: 5, qty: 1 }); // mutates the array in place
console.log('count.value', count.value, 'but lines', store.state.cart.length);
store.state.cart = [...store.state.cart]; // a new array notifies the getter
console.log('count.value', count.value);

Output

cartCount -> 1
count.value 1 but lines 2
cartCount -> 2
count.value 2

How a Store action reaches the screen: the state Proxy's set trap re-runs dependent getters, whose subscribers re-render on the next animation frame

push() changed the array but not state.cart itself, so the getter kept its old value until the array was replaced. Every BookNest action therefore builds a new array or object with map, filter or spread.

MENU