This commit is contained in:
Olivier Floch
2024-02-23 09:48:13 +01:00
parent e8eb2fe6a7
commit 3d46fa9e3e
2 changed files with 7 additions and 1 deletions

View File

@@ -82,6 +82,12 @@ const CounterContext = createContext(10, counter => ({
// Example 2. Return a computed value
const DoubleContext = createContext(10, num => computed(() => num.value * 2))
// Example 3. Use a previous value
const ColorContext = createContext('info' as Color, (color, previousColor) => ({
name: color,
colorContextClass: computed(() => (previousColor.value === color.value ? undefined : `color-context-${color.value}`)),
}))
```
### 2. Use the context

View File

@@ -69,7 +69,7 @@ Color contexts rely on the type `Color` defined in `/lib/types/color.type.ts`:
## Usage
To get and set the color context in a component, you can use the `useContext` composable, which takes a `ColorContext` (defined in `context.ts`) as first parameter and returns the `colorContextClass`:
To get and set the color context in a component, you can pass the `ColorContext` to `useContext` and apply the `colorContextClass` to the root component:
```ts
// ParentComponent.vue