@empathyco/x-components/docs/API-reference/api/x-components.xstoremodule.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XStoreModule](./x-components.xstoremodule.md)

## XStoreModule interface

Type safe [Vuex](https://vuex.vuejs.org/) store module.

**Signature:**

```typescript
export interface XStoreModule<State extends Record<keyof State, any>, Getters extends Record<keyof Getters, any>, Mutations extends MutationsDictionary<Mutations>, Actions extends ActionsDictionary<Actions>> 
```

## Example

How to create a type safe store module:

```typescript
interface SearchBoxState {
 query: string;
}

interface SearchBoxGetters {
 safeQuery: string;
}

interface SearchBoxMutations {
 setQuery(newQuery: string): void;
}

interface SearchBoxActions {
 someAsyncExampleFunction(): Promise<string>;
 someExampleFunction(doThings: boolean): number;
}

type SearchBoxXStoreModule = XStoreModule<SearchBoxState, SearchBoxGetters, SearchBoxMutations,
  SearchBoxActions>;

const searchBoxXStoreModule: SearchBoxXStoreModule = {
 state: () => ({ query: '' }),
 getters: {
   safeQuery(state) {
     // Your implementation code
   }
 },
 mutations: {
   setQuery(state, newQuery) {
     // Your implementation code
   }
 },
 actions: {
  someAsyncExampleFunction() {
    // Your implementation code
  },
  someExampleFunction(context, doThings) {
    // Your implementation code
  }
}
};
```

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [actions](./x-components.xstoremodule.actions.md) |  | [ActionsTree](./x-components.actionstree.md)<!-- -->&lt;State, Getters, Mutations, Actions&gt; |  |
|  [getters](./x-components.xstoremodule.getters.md) |  | [GettersTree](./x-components.getterstree.md)<!-- -->&lt;State, Getters&gt; |  |
|  [mutations](./x-components.xstoremodule.mutations.md) |  | [MutationsTree](./x-components.mutationstree.md)<!-- -->&lt;State, Mutations&gt; |  |
|  [state](./x-components.xstoremodule.state.md) |  | () =&gt; State |  |