Boilerplate! - Vuex Store

{filename}--Actions.ts

{{{
	variables.projectName = variables.package.template?.name || variables.package.name.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).join('')

}}}import { ActionContext } from 'vuex';
import { IStoreState } from './State';

/**
 * @type ActionContext<S, R>
 */
type Context = ActionContext<IStoreState, IStoreState>;

/**
 * Actions are generally meant to be the entrypoint for modifying state.
 *
 * They are asynchronous calls that can perform other tasks and then
 * trigger a mutation (synchronous).
 *
 * @see https://vuex.vuejs.org/guide/actions.html
 *
 * @class Actions
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${{ variables.projectName }}
 */
const actions = {
	/**
	 * @param Context context
	 * @param any payload
	 * @return void
	 */
	example(context: Context, payload: any): void {
		context.commit('example', payload);
	},
};

export default actions;

{filename}--Getters.ts

{{{
	variables.projectName = variables.package.template?.name || variables.package.name.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).join('')

}}}import State from './State';

/**
 * Getters are used to calculate values based off state. They are generally
 * used for filtering or formatting data.
 *
 * @class Getters
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${{ variables.projectName }}
 */
const getters = {
	/**
	 * @param State state
	 * @return string
	 */
	foo(state: typeof State): string {
		return !!state.foo;
	},
};

export default getters;

{filename}--index.ts

import actions from './Actions';
import getters from './Getters';
import mutations from './Mutations';
import persist from './Persist';
import state from './State';

/**
 * Separate from global namespace. If we namespace it, you can access like:
 *
 * Getters:
 * 		store.getters['module/getterName'];
 *
 * State:
 * 		store.state.module.stateName;
 *
 * Actions:
 * 		store.dispatch('module/actionName');
 *
 */
const namespaced = false;

/**
 * Configure plugins
 */
const plugins = [persist];

// Setup Store
// -----------------------------------------------------------------------------

export default {
	/**
	 * Triggerable actions
	 * e.g. store.dispatch('increment');
	 */
	actions,

	/**
	 * Calculated values based off state
	 * e.g. store.getters.doubleCount;
	 */
	getters,

	/**
	 * Mutations are a way of modifying state indirectly
	 * e.g. store.commit('increment', 1);
	 */
	mutations,

	/**
	 * Separate getters and actions from global namespace
	 */
	namespaced,

	/**
	 * Vuex Plugin for persisting data across sessions
	 */
	plugins,

	/**
	 * Raw object of our current state
	 */
	state,
};

{filename}--Mutations.ts

{{{
	variables.projectName = variables.package.template?.name || variables.package.name.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).join('')

}}}import State from './State';

/**
 * Mutations are a synchronous way of modifying state. They are generally
 * called through Actions. It's best to think of them as setters.
 *
 * @see https://vuex.vuejs.org/guide/mutations.html
 *
 * @class Mutations
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${{ variables.projectName }}
 */
const mutations = {
	/**
	 * @param State state
	 * @param any payload
	 * @return void
	 */
	example(state: typeof State, payload: any): void {
		state.foo = 'boo';
	},
};

export default mutations;

{filename}--Persist.ts

export default (state: IKeyValue) => ({
	foo: state.foo,
});

{filename}--State.ts

{{{
	variables.projectName = variables.package.template?.name || variables.package.name.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).join('')

}}}/**
 * @type interface
 */
export interface IStoreState {
	foo: string;
}

/**
 * @class State
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${{ variables.projectName }}
 */
const state: IStoreState = {
	foo: 'bar',
};

export default state;