@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

<table><thead><tr><th>

Property


</th><th>

Modifiers


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td>

[actions](./x-components.xstoremodule.actions.md)


</td><td>


</td><td>

[ActionsTree](./x-components.actionstree.md)<!-- -->&lt;State, Getters, Mutations, Actions&gt;


</td><td>


</td></tr>
<tr><td>

[getters](./x-components.xstoremodule.getters.md)


</td><td>


</td><td>

[GettersTree](./x-components.getterstree.md)<!-- -->&lt;State, Getters&gt;


</td><td>


</td></tr>
<tr><td>

[mutations](./x-components.xstoremodule.mutations.md)


</td><td>


</td><td>

[MutationsTree](./x-components.mutationstree.md)<!-- -->&lt;State, Mutations&gt;


</td><td>


</td></tr>
<tr><td>

[state](./x-components.xstoremodule.state.md)


</td><td>


</td><td>

() =&gt; State


</td><td>


</td></tr>
</tbody></table>