# @latte-ui/vuex-composables

> A set of utility composables for Vuex stores and modules.

Latest version **2.0.15** (published 2021-02-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @latte-ui/vuex-composables
pnpm add @latte-ui/vuex-composables
yarn add @latte-ui/vuex-composables
bun add @latte-ui/vuex-composables
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.15 |
| Published | 2021-02-02 |
| First published | 2020-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bas Milius |
| Maintainers | basmilius |

## Links

- npm: https://www.npmjs.com/package/@latte-ui/vuex-composables
- npm.io page: https://npm.io/package/@latte-ui/vuex-composables

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.5
- [vuex](https://npm.io/package/vuex.md) ^4.0.0

## Recent versions

- 2.0.15 (latest) — 2021-02-02
- 2.0.14 — 2020-12-31
- 2.0.13 — 2020-12-03
- 2.0.12 — 2020-11-26
- 2.0.11 — 2020-11-25
- 2.0.10 — 2020-10-30
- 2.0.9 — 2020-10-24
- 2.0.8 — 2020-10-18
- 2.0.7 — 2020-09-18
- 2.0.6 — 2020-09-18
- 2.0.5 — 2020-09-17
- 2.0.4 — 2020-09-15
- 2.0.3 — 2020-09-03
- 2.0.2 — 2020-08-29
- 2.0.1 — 2020-08-26
- … 1 more at https://npm.io/package/@latte-ui/vuex-composables/versions

## README

<a href="https://bas.dev" target="_blank" rel="noopener">
	<img src="https://bas.dev/module/@bas/website/resource/image/logo.svg" alt="Bas Milius Logo" height="60" width="60" />
</a>

---

# Vuex Composables
A set of utility composables to use with Vuex stores and modules. These composables
create strongly typed references to your actions, getters and mutations in your
stores/modules.

#### ⚠️ Before using this library
You should create your own composables so everything will be strongly typed in
your code. You should create interfaces of your actions, getters and mutations 
and pass them to these functions.

#### 🧐 Example interfaces
```typescript
export interface AuthActions
{
	initialize(): Promise<void>;
	loadAuthenticatedUser(): Promise<void>;
	login(payload: LoginActionPayload): Promise<void>;
	setToken(token: string | null): void;
	setUser(user: GAuthenticatedUser | null): void;
}

export interface AuthGetters
{
	isAuthenticated: boolean;
	token: string | null;
	user: GAuthenticatedUser | null;
}

export interface AuthMutations
{
	updateToken(token: string | null): void;
	updateUser(user: GAuthenticatedUser | null): void;
}

export interface AuthState
{
	token: string | null;
	user: GAuthenticatedUser | null;
}
```

#### Implementation of useActions
```typescript
// Own composable that calls useActions()
export function useAuthActions<K extends keyof AuthActions>(actions: K[]): UseActions<AuthActions>
{
	return useActions<AuthActions, K>("auth", actions);
}

// Example of using that composable
defineComponent({
    setup()
    {
        const {loadAuthenticatedUser, login} = useAuthActions(["loadAuthenticatedUser", "login"]);
        return {loadAuthenticatedUser, login}
    }
});
```

#### Implementation of useGetters
```typescript
// Own composable that calls useGetters()
export function useAuthGetters<K extends keyof AuthGetters>(getters: K[]): UseGetters<AuthGetters>
{
	return useGetters<AuthGetters, K>("auth", getters);
}

// Example of using that composable
defineComponent({
    setup()
    {
        const {isAuthenticated, user} = useAuthGetters(["isAuthenticated", "user"]);
        return {isAuthenticated, user}
    }
});
```

#### Implementation of useMutations
```typescript
// Own composable that calls useGetters()
export function useAuthMutations<K extends keyof AuthMutations>(mutations: K[]): UseMutations<AuthMutations>
{
	return useMutations<AuthMutations, K>("auth", mutations);
}

// Example of using that composable
defineComponent({
    setup()
    {
        const {updateToken} = useAuthMutations(["updateToken"]);
        return {updateToken}
    }
});
```

---

*Created by [Bas Milius](https://bas.dev).*

---
_Source: https://npm.io/package/@latte-ui/vuex-composables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._