Examples for pulling state/actions/etc into components

[hworld]

Curious if you had examples for how you pull vuex stores into your components for state access committing and dispatching?

Do you define $store as your typed store for each component that may use store stuff?

[snaptopixel]

Thanks @hworld... I'm working on more/better examples that I hope to have done in a couple of weeks.

[hworld]

Sounds great!

Not sure if you plan on writing out custom code/decorators for pulling state/actions/getters/mutations into components (wrappers around mapGetters, etc.) but I'm currently using https://github.com/ktsn/vuex-class/ and here's how I did it in my components.

type Actions = {
	bootstrap: any,
};

type Mutations = {
	bootstrapGame: number;
};

@module({
	store: true,
})
export class AppStore
{
	dispatch: VuexDispatch<Actions>;
	commit: VuexCommit<Mutations>;
	game: Game | null = null;

	get packages()
	{
		return [];
	}

	@action
	async bootstrap( payload: Actions['bootstrap'] )
	{
		// do something
	}

	@mutation
	bootstrapGame( gameId: Mutations['bootstrapGame'] )
	{
		// do something
	}
}

class MyComponent
{
	@State game: AppStore['game'];
	@Getter packages: AppStore['packages'];
	@Action bootstrap: AppStore['bootstrap'];
	@Mutation bootstrapGame: AppStore['bootstrapGame'];
}

This ensures proper types for everything so if I change the AppStore all my components will have correct type/error checking. Maybe it'll help for the examples! =]