Methods
Bu sahifa hali tarjima qilinmagan

Tarjima qoshish uchun havola boyicha o'tib Pull Request oching (havolaga o'tish).

Standart til uchun tarkibni ko'rsatadi. 

import { useStoreMap } from "effector-vue/composition";
since

useStoreMap introduced in effector-vue 22.2.0

Function, which subscribes to a store and transforms its value with a given selector. fn receives the state object of the store itself, not a copy or a proxy, and must not mutate it. The returned ComputedRef updates only when the result of the selector changes, so a component reading one item of a large store is not touched by the updates of the other items.

Methods

useStoreMap($store, fn)

since

Short version of useStoreMap introduced in effector-vue 23.3.0

Formulae

useStoreMap(
  $store: Store<State>,
  fn: (state: State) => Result,
  opts?: {scope?: Scope, forceScope?: boolean},
): ComputedRef<Result>;

Arguments

  1. $store: Source Store<State>
  2. fn ((state) => result): Selector function to receive part of source store
  3. opts (Object): Optional scope options

Returns

(ComputedRef<Result>)

Examples

<script setup lang="ts">
import { useStoreMap } from "effector-vue/composition";


import { $user } from "./model";


const name = useStoreMap($user, (user) => user.name);
</script>


<template>
  <p>{{ name }}</p>
</template>

useStoreMap(config)

Formulae

useStoreMap({
  store: Store<State>,
  keys?: MaybeRefOrGetter<Keys>,
  fn: (state: State, keys: Keys) => Result,
  updateFilter?: (update: Result, current: Result) => boolean,
  defaultValue?: Result,
  scope?: Scope,
  forceScope?: boolean,
}): ComputedRef<Result>;

Arguments

  1. params (Object): Configuration object
    • store: Source store
    • keys (MaybeRefOrGetter<Keys>): Passed to fn as its second argument. A getter or a ref is tracked, so the selector runs again when it changes. A plain value is used as it is
    • fn ((state: State, keys: Keys) => Result): Selector function to receive part of source store
    • updateFilter ((update: Result, current: Result) => boolean): Decides whether a new result of fn replaces the current one. Defaults to update !== current
    • defaultValue (Result): Used every time fn returns undefined
    • scope (Scope) and forceScope (boolean): Scope options of the call
since

scope and forceScope options introduced in effector-vue 23.3.0

since

keys accepts a value or a ref since effector-vue 23.3.0. Before that it accepted a getter only

Returns

(ComputedRef<Result>)

since

Changed in effector-vue 23.3.0:

  • fn receives the state object of the store. Before that it received a proxy, and the state of the store was mutated in place
  • a store that holds null is supported, and a key removed from the state is dropped instead of keeping its last value
  • the subscription is disposed with the effect scope and skipped during a server render

Examples

This hook is very useful for working with lists, especially with large ones

User.vue
<script setup lang="ts">
import { useStoreMap } from "effector-vue/composition";


import { $users } from "./model";


const props = defineProps<{ id: number }>();


const name = useStoreMap({
  store: $users,
  keys: () => props.id,
  fn: (users, userId) => users.find(({ id }) => id === userId)?.name,
  defaultValue: "unknown",
});
</script>


<template>
  <div>
    <strong>[{{ id }}]</strong> {{ name }}
  </div>
</template>
App.vue
<script setup lang="ts">
import { useUnit } from "effector-vue/composition";


import { $ids } from "./model";
import User from "./User.vue";


const ids = useUnit($ids);
</script>


<template>
  <div>
    <User v-for="id in ids" :key="id" :id="id" />
  </div>
</template>
model.ts
import { createStore } from "effector";


type User = { id: number; name: string };


export const $users = createStore<User[]>([
  { id: 1, name: "Yung" },
  { id: 2, name: "Lean" },
  { id: 3, name: "Kyoto" },
  { id: 4, name: "Sesh" },
]);


export const $ids = createStore([1, 2, 3, 4]);


export const $count = createStore(0);

Filtering updates

Changed in 23.3.0

Since effector-vue 23.3.0 updateFilter receives the results of fn, as in effector-react. Before that it received the state of the store, so a filter written against the raw state has to be rewritten.

updateFilter receives the results of fn, not the state of the store. A rejected result is dropped, and the previous one stays until an accepted one arrives. A recompute caused by keys goes through the filter as well.

const evenCount = useStoreMap({
  store: $count,
  fn: (count) => count,
  updateFilter: (update) => update % 2 === 0,
});

During a server render there is nothing to filter: the value follows the store until the render ends, and updateFilter is not called.

Tarjima jamiyat tomonidan qollanilyapti

Ingliz tilidagi hujjatlar eng dolzarb hisoblanadi, chunki u effector guruhi tomonidan yozilgan va yangilanadi. Hujjatlarni boshqa tillarga tarjima qilish jamiyat tomonidan kuch va istaklar mavjud bo'lganda amalga oshiriladi.

Esda tutingki, tarjima qilingan maqolalar yangilanmasligi mumkin, shuning uchun eng aniq va dolzarb ma'lumot uchun hujjatlarning asl inglizcha versiyasidan foydalanishni tavsiya etamiz.

Hammualliflar
Commits