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

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

// 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