ποΈ Centralized State management for non Vue.js applications such as React, ReactJS, React Native
Vuex doesnβt really restrict how you structure your code. Rather, it enforces a set of high-level principles:
Application-level state is centralized in the store.
The only way to mutate the state is by committing mutations, which are synchronous transactions.
Asynchronous logic should be encapsulated in, and can be composed with actions.
As long as you follow these rules, itβs up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files.
For any non-trivial app, we will likely need to leverage modules. Hereβs an example project structure:
βββ index.html
βββ App.tsx
βββ api
βΒ Β βββ ... # abstractions for making API requests
βββ components
βΒ Β βββ MyComponent.tsx
βΒ Β βββ ...
βββ store
βββ index.ts # where we assemble modules and export the store
βββ actions.ts # root actions
βββ mutations.ts # root mutations
βββ modules
Β Β βββ cart.ts # cart module
Β Β βββ products.ts # products module