noob-components/.trellis/spec/plugs-composables/use-action-pers.md

# useActionPers

> Action permissions management with Vuex store integration.

## Purpose

Retrieves and manages action permissions from Vuex store, typically for controlling UI element visibility based on user permissions.

## Signature

```typescript
export function useActionPers(parent?: string): {
  get: (per: string) => boolean;
  update: () => Promise<void>;
  actionPers: Ref<Record<string, boolean>>;
}
```

## Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `parent` | `string` | `route.path` | Permission namespace/path |

## Return Value

| Property | Type | Description |
|----------|------|-------------|
| `get` | `(per: string) => boolean` | Check if specific permission is granted |
| `update` | `() => Promise<void>` | Force refresh permissions from store |
| `actionPers` | `Ref<Record<string, boolean>>` | Reactive permission map |

## Usage Pattern

```typescript
// Example: plugs/composables/useActionPers.ts
import { useActionPers } from "plugs/composables";

const { get, update, actionPers } = useActionPers();

// Check permission
if (get("user:create")) {
  showCreateButton();
}

// Use in template
// v-if="actionPers.value.user:delete"

// Refresh permissions
await update();
```

## Vuex Store Structure

Expects store to have:
- `state.actionPers[parent]` - Array of permission codes
- `dispatch("updateActionPers", parent)` - Action to refresh permissions

## Key Implementation Details

1. **Permission mapping**: Converts permission array to object with all values set to `true`
2. **Auto-fetch on mount**: Calls `update()` in `onMounted` hook
3. **Route-based namespace**: Uses current route path as default namespace

## Dependencies

- `vue` - `onMounted`, `toRef`
- `vue-router` - `useRoute`
- `vuex` - `useStore`

## Anti-patterns

- Do not hardcode permission checks; always go through `get()` method
- Do not call `update()` too frequently; permissions are typically stable