So far We have been using props to pass data through parent child chain in our vuejs apps. This can be still working, we can do these data transactions and state management in a much easier way.
This is tutorial uses Typescript
Vuex Store Modules
Vuex store can be organized as modules, so that we can organize the data in a better way.Each module has its own state, mutations, actions and getters. Each state should have a type.
Products Module and interfaces
First up all create types for our state. The state is a indented to store values (array), so we have to define two types, one for state variable and another for array type.
export interface productState {
products: Product[];
}
export interface Product {
id: number;
product: string;
pk: string;
mfr: string;
hsn?: string;
ts: number;
}
We can store these types into a separate file which is recommended.