Vue Memoize Dict

https://github.com/yanhao98/vue-memoize-dict
Admin
Vue Memoize Dict is a dictionary cache for Vue applications, supporting both Vue 2 and Vue 3.
Tokens:5,090
Snippets:20
Trust Score:6.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### get() - Retrieve Cached Dictionary Data

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Get dictionary data from cache, automatically triggering a fetch if not already cached. Returns undefined initially, then reactively updates when data loads.

```APIDOC
## get() - Retrieve Cached Dictionary Data

### Description
Get dictionary data from cache, automatically triggering a fetch if not already cached. Returns `undefined` initially, then reactively updates when data loads.

### Method
`get(key: string)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const memoizeDict = new MemoizeDict({
  config: {
    statuses: {
      data: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return [
          { value: 'active', label: 'Active' },
          { value: 'inactive', label: 'Inactive' },
          { value: 'pending', label: 'Pending' }
        ];
      }
    }
  }
});

// First call returns undefined and triggers fetch
console.log(memoizeDict.get('statuses')); // undefined

// After data loads (100ms), returns the data
setTimeout(() => {
  console.log(memoizeDict.get('statuses'));
  // [{ value: 'active', label: 'Active' }, ...]
}, 150);
```

### Response
#### Success Response (200)
- **data** (Array | undefined) - The cached dictionary data or undefined if not yet loaded.
```

--------------------------------

### Retrieve Cached Data with Auto-Fetch (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Illustrates how to use the `get()` method to retrieve dictionary data. If the data is not in the cache, it automatically triggers the data fetching function defined in the configuration. The method initially returns `undefined` and reactively updates once the data is loaded.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    statuses: {
      data: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return [
          { value: 'active', label: 'Active' },
          { value: 'inactive', label: 'Inactive' },
          { value: 'pending', label: 'Pending' }
        ];
      }
    }
  }
});

// First call returns undefined and triggers fetch
console.log(memoizeDict.get('statuses')); // undefined

// After data loads (100ms), returns the data
setTimeout(() => {
  console.log(memoizeDict.get('statuses'));
  // [{ value: 'active', label: 'Active' }, ...]
}, 150);
```

--------------------------------

### Get Full Hierarchical Path Label - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Generates a complete, human-readable label path for an item within a hierarchical structure. It traverses parent-child relationships starting from the specified item up to the root. This function is useful for breadcrumb navigation or displaying nested data.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    locations: {
      data: () => [
        { value: 1, label: 'USA', parent: 0 },
        { value: 2, label: 'California', parent: 1 },
        { value: 3, label: 'San Francisco', parent: 2 },
        { value: 4, label: 'SOMA', parent: 3 }
      ]
    }
  }
});

console.log(memoizeDict.treeLabel('locations', 4));
// 'USA-California-San Francisco-SOMA'

console.log(memoizeDict.treeLabel('locations', 2));
// 'USA-California'

console.log(memoizeDict.treeLabel('locations', 1));
// 'USA'

console.log(memoizeDict.treeLabel('locations', 999));
// '999' (fallback when not found)
```

--------------------------------

### Get Labels for Multiple Values - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Converts an array of values into their corresponding labels from a specified dictionary. It intelligently filters out any null, undefined, or empty string values from the input array before processing. This is ideal for batch label retrieval.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    tags: {
      data: () => [
        { value: 't1', label: 'JavaScript' },
        { value: 't2', label: 'TypeScript' },
        { value: 't3', label: 'Vue' },
        { value: 't4', label: 'React' }
      ]
    }
  }
});

const selectedTags = ['t1', 't3', 't4'];
console.log(memoizeDict.labels('tags', selectedTags));
// ['JavaScript', 'Vue', 'React']

// Handles edge cases
console.log(memoizeDict.labels('tags', ['t1', null, '', undefined, 't2']));
// ['JavaScript', 'TypeScript']

console.log(memoizeDict.labels('tags', undefined)); // []
```

--------------------------------

### Get Label for Single Value - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Retrieves the display label for a single value from a specified dictionary. It automatically falls back to the value itself if no matching label is found. This function is useful for displaying user-friendly names for enumerated values.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    roles: {
      data: () => [
        { value: 'admin', label: 'Administrator' },
        { value: 'user', label: 'Regular User' },
        { value: 'guest', label: 'Guest User' }
      ]
    }
  }
});

console.log(memoizeDict.label('roles', 'admin')); // 'Administrator'
console.log(memoizeDict.label('roles', 'user'));  // 'Regular User'
console.log(memoizeDict.label('roles', 'unknown')); // 'unknown'
console.log(memoizeDict.label('roles', undefined)); // ''
```

--------------------------------

### Clear All Cache - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Removes all data that has been cached by the MemoizeDict instance. After calling this method, any subsequent calls to `get()` or `fetch()` for any dictionary will trigger a new data fetch. This is useful for scenarios where the entire application's data needs to be reset.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    dict1: { data: () => [{ value: 1, label: 'A' }] },
    dict2: { data: () => [{ value: 2, label: 'B' }] }
  }
});

memoizeDict.get('dict1');
memoizeDict.get('dict2');

// Both dictionaries are cached
console.log(memoizeDict.get('dict1')); // [{ value: 1, label: 'A' }]
console.log(memoizeDict.get('dict2')); // [{ value: 2, label: 'B' }]

// Clear all cache
memoizeDict.clear();

// Both return undefined, triggering fresh fetches
console.log(memoizeDict.get('dict1')); // undefined
console.log(memoizeDict.get('dict2')); // undefined
```

--------------------------------

### Initialize MemoizeDict with Field Mappings and Data Config (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Demonstrates initializing the `MemoizeDict` class with custom field names for value, label, and parent, and configuring data sources for different dictionary types. It shows how to define asynchronous data fetching for user types and static data for categories.

```typescript
import { MemoizeDict } from 'vue-memoize-dict';

type DictData = {
  id: number;
  label: string;
  parent: number;
};

const memoizeDict = new MemoizeDict<DictData>({
  fieldNames: {
    label: 'label',  // Field containing the display label
    value: 'id',     // Field containing the unique identifier
    parent: 'parent' // Field containing the parent reference for hierarchical data
  },
  config: {
    userTypes: {
      data: async () => {
        const response = await fetch('/api/user-types');
        return response.json();
      }
    },
    categories: {
      data: () => [
        { id: 1, label: 'Electronics', parent: 0 },
        { id: 2, label: 'Computers', parent: 1 },
        { id: 3, label: 'Laptops', parent: 2 }
      ]
    }
  }
});
```

--------------------------------

### MemoizeDict Class Constructor

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Initialize a new MemoizeDict instance to manage cached dictionary data with configurable field mappings.

```APIDOC
## MemoizeDict Class Constructor

### Description
Initialize a new `MemoizeDict` instance to manage cached dictionary data with configurable field mappings.

### Method
`constructor`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **fieldNames** (object) - Required - Configuration for mapping dictionary fields.
  - **label** (string) - Required - The field name for the display label.
  - **value** (string) - Required - The field name for the unique identifier.
  - **parent** (string) - Optional - The field name for the parent reference in hierarchical data.
- **config** (object) - Required - Configuration for data sources.
  - **[key]** (object) - Required - Configuration for a specific dictionary.
    - **data** (Function) - Required - A function that returns the dictionary data (can be an async function).

### Request Example
```typescript
import { MemoizeDict } from 'vue-memoize-dict';

type DictData = {
  id: number;
  label: string;
  parent: number;
};

const memoizeDict = new MemoizeDict<DictData>({
  fieldNames: {
    label: 'label',  // Field containing the display label
    value: 'id',     // Field containing the unique identifier
    parent: 'parent' // Field containing the parent reference for hierarchical data
  },
  config: {
    userTypes: {
      data: async () => {
        const response = await fetch('/api/user-types');
        return response.json();
      }
    },
    categories: {
      data: () => [
        { id: 1, label: 'Electronics', parent: 0 },
        { id: 2, label: 'Computers', parent: 1 },
        { id: 3, label: 'Laptops', parent: 2 }
      ]
    }
  }
});
```

### Response
#### Success Response (200)
An instance of `MemoizeDict`.

#### Response Example
`MemoizeDict` instance
```

--------------------------------

### Dynamic Dictionary Configuration with Proxy (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Demonstrates dynamic dictionary configuration using JavaScript Proxy. This approach allows the MemoizeDict to handle any dictionary name automatically. It specifies custom field names for label, value, and parent, and uses a Proxy to define how data is fetched for each dictionary name from a '/api/dict/:dictName' endpoint. It includes error handling for non-existent dictionaries.

```typescript
const memoizeDict = new MemoizeDict({
  fieldNames: {
    label: 'name',
    value: 'id',
    parent: 'parentId'
  },
  config: new Proxy({}, {
    get: (target, dictName: string) => ({
      data: async () => {
        // Dynamically fetch any dictionary by name
        const response = await fetch(`/api/dict/${dictName}`);
        if (!response.ok) {
          throw new Error(`Failed to load dictionary: ${dictName}`);
        }
        return response.json();
      }
    })
  })
});

// Works with any dictionary name
const users = memoizeDict.get('users');
const departments = memoizeDict.get('departments');
const projects = memoizeDict.get('projects');

// Will throw error for non-existent dictionaries
try {
  await memoizeDict.fetch('nonexistent');
} catch (error) {
  console.error(error); // Error: Failed to load dictionary: nonexistent
}

```

--------------------------------

### Create Scoped MemoizeDict Manager (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Creates a memoized dictionary manager with a scoped API for cleaner access. It utilizes a Proxy for dynamic configuration of data fetching. Dependencies include 'vue-memoize-dict' and fetch API. It takes a generic type for dictionary items and returns a scoped interface for accessing data, tree structures, and performing fetch/load operations.

```typescript
import { createMemoizeDict } from 'vue-memoize-dict';

const memoizeDict = createMemoizeDict<{ 
  label: string;
  value: number;
  parent: number;
}>({
  config: new Proxy({}, {
    get: (_, key: string) => ({
      data: async () => {
        const response = await fetch(`/api/dictionaries/${key}`);
        return response.json();
      }
    })
  })
});

// Use scoped API for cleaner code
const statusDict = memoizeDict('statuses');

// Access data reactively
console.log(statusDict.data); // undefined initially, then updates

// Get tree structure
console.log(statusDict.tree);

// Fetch data
await statusDict.fetch();

// Force reload
await statusDict.load();

// Find item and get labels
console.log(statusDict.itemByValue(1));
console.log(statusDict.labelByValue(1));
console.log(statusDict.labelsByValues([1, 2, 3]));
console.log(statusDict.treeLabelByValue(3));

```

--------------------------------

### find() / item() - Find Dictionary Item by Value

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Locate a specific dictionary item by its value field. The `item()` method is an alias for `find()`.

```APIDOC
## find() / item() - Find Dictionary Item by Value

### Description
Locate a specific dictionary item by its value field. The `item()` method is an alias for `find()`.

### Method
`find(key: string, value: any)` or `item(key: string, value: any)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const memoizeDict = new MemoizeDict({
  config: {
    priorities: {
      data: () => [
        { value: 1, label: 'Low', color: 'green' },
        { value: 2, label: 'Medium', color: 'yellow' },
        { value: 3, label: 'High', color: 'red' }
      ]
    }
  }
});

const highPriority = memoizeDict.find('priorities', 3);
console.log(highPriority);
// { value: 3, label: 'High', color: 'red' }

// Using alias
const mediumPriority = memoizeDict.item('priorities', 2);
console.log(mediumPriority);
// { value: 2, label: 'Medium', color: 'yellow' }
```

### Response
#### Success Response (200)
- **item** (Object | undefined) - The found dictionary item or undefined if not found.
```

--------------------------------

### tree() - Convert Flat Data to Hierarchical Tree

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Transform flat dictionary data into a nested tree structure based on parent-child relationships.

```APIDOC
## tree() - Convert Flat Data to Hierarchical Tree

### Description
Transform flat dictionary data into a nested tree structure based on parent-child relationships.

### Method
`tree(key: string)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const memoizeDict = new MemoizeDict({
  config: {
    departments: {
      data: () => [
        { value: 1, label: 'Engineering', parent: 0 },
        { value: 2, label: 'Frontend', parent: 1 },
        { value: 3, label: 'Backend', parent: 1 },
        { value: 4, label: 'DevOps', parent: 3 },
        { value: 5, label: 'Marketing', parent: 0 }
      ]
    }
  }
});

const tree = memoizeDict.tree('departments');
console.log(tree);
// [
//   {
//     value: 1, label: 'Engineering', parent: 0,
//     children: [
//       { value: 2, label: 'Frontend', parent: 1, children: [] },
//       {
//         value: 3, label: 'Backend', parent: 1,
//         children: [
//           { value: 4, label: 'DevOps', parent: 3, children: [] }
//         ]
//       }
//     ]
//   },
//   { value: 5, label: 'Marketing', parent: 0, children: [] }
// ]
```

### Response
#### Success Response (200)
- **treeData** (Array) - An array representing the hierarchical tree structure.
```

--------------------------------

### Find Dictionary Item by Value (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Demonstrates the `find()` method and its alias `item()` for locating a specific dictionary entry based on its unique value. This method efficiently searches the cached data for an item matching the provided value.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    priorities: {
      data: () => [
        { value: 1, label: 'Low', color: 'green' },
        { value: 2, label: 'Medium', color: 'yellow' },
        { value: 3, label: 'High', color: 'red' }
      ]
    }
  }
});

const highPriority = memoizeDict.find('priorities', 3);
console.log(highPriority);
// { value: 3, label: 'High', color: 'red' }

// Using alias
const mediumPriority = memoizeDict.item('priorities', 2);
console.log(mediumPriority);
// { value: 2, label: 'Medium', color: 'yellow' }
```

--------------------------------

### Fetch Data from Cache or Trigger Fetch - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Retrieves data for a specified dictionary. If the data is already in the cache, it's returned immediately. Otherwise, it triggers the asynchronous data fetching function configured for that dictionary and caches the result. Returns a Promise resolving to the data.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    countries: {
      data: async () => {
        const response = await fetch('/api/countries');
        return response.json();
      }
    }
  }
});

// First call triggers fetch
const data1 = await memoizeDict.fetch('countries');
console.log(data1); // [{ value: 'US', label: 'United States' }, ...]

// Second call returns cached data without refetching
const data2 = await memoizeDict.fetch('countries');
console.log(data1 === data2); // true
```

--------------------------------

### Convert Flat Data to Hierarchical Tree (TypeScript)

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Shows how to use the `tree()` method to transform a flat array of dictionary items into a nested tree structure. This is useful for representing hierarchical data like categories or organizational structures, based on parent-child relationships defined by the `parent` field.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    departments: {
      data: () => [
        { value: 1, label: 'Engineering', parent: 0 },
        { value: 2, label: 'Frontend', parent: 1 },
        { value: 3, label: 'Backend', parent: 1 },
        { value: 4, label: 'DevOps', parent: 3 },
        { value: 5, label: 'Marketing', parent: 0 }
      ]
    }
  }
});

const tree = memoizeDict.tree('departments');
console.log(tree);
// [
//   {
//     value: 1, label: 'Engineering', parent: 0,
//     children: [
//       { value: 2, label: 'Frontend', parent: 1, children: [] },
//       {
//         value: 3, label: 'Backend', parent: 1,
//         children: [
//           { value: 4, label: 'DevOps', parent: 3, children: [] }
//         ]
//       }
//     ]
//   },
//   { value: 5, label: 'Marketing', parent: 0, children: [] }
// ]
```

--------------------------------

### Force Refresh and Update Cache - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Forces a fresh fetch of the data for a specified dictionary, overriding any existing cached data. The newly fetched data is then stored in the cache. This is useful for ensuring the application has the latest information after the data source has potentially changed.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    notifications: {
      data: async () => {
        const response = await fetch('/api/notifications');
        return response.json();
      }
    }
  }
});

// Initial fetch
await memoizeDict.fetch('notifications');
console.log(memoizeDict.get('notifications')); // [{ value: 1, label: 'Welcome' }]

// Force refresh after user action
await memoizeDict.load('notifications');
console.log(memoizeDict.get('notifications')); // [{ value: 1, label: 'Welcome' }, { value: 2, label: 'New message' }]
```

--------------------------------

### Clear Specific Dictionary Cache - TypeScript

Source: https://context7.com/yanhao98/vue-memoize-dict/llms.txt

Removes the cached data for a single, specified dictionary name. This allows for selective cache invalidation, ensuring that only the data for the targeted dictionary is cleared while other cached dictionaries remain intact. Subsequent access to the cleared dictionary will trigger a fresh fetch.

```typescript
const memoizeDict = new MemoizeDict({
  config: {
    products: { data: async () => [{ value: 1, label: 'Product A' }] },
    vendors: { data: async () => [{ value: 1, label: 'Vendor X' }] }
  }
});

await memoizeDict.fetch('products');
await memoizeDict.fetch('vendors');

// Delete only products cache
memoizeDict.delete('products');

console.log(memoizeDict.get('products')); // undefined (cache cleared)
console.log(memoizeDict.get('vendors'));  // [{ value: 1, label: 'Vendor X' }] (still cached)
```
Tokens:
Raw