Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://effector.dev/en/api/effector-vue/useStoreMap below:

Website Navigation

• effector
• Blog

useStoreMap | effector

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

Function, which subscribes to store and transforms its value with a given function. Signal will update only when the selector function result will change

useStoreMap(
  $store: Store<State>,
  fn: (state: State) => Result,
): ComputedRef<Result>;

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

(ComputedRef<Result>)

useStoreMap({
  store: Store<State>,
  keys?: () => Keys,
  fn: (state: State, keys: Keys) => Result,
  defaultValue?: Result,
}): ComputedRef<Result>;

1. params (Object): Configuration object
   • store: Source store
   • keys (() => Keys): Will be passed to fn selector
   • fn ((state: State, keys: Keys) => Result): Selector function to receive part of source store
   • defaultValue (Result): Optional default value if fn returned undefined

(ComputedRef<Result>)

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

import { createStore } from "effector";
import { useUnit, useStoreMap } from "effector-vue/composition";
const $users = createStore([
  {
    id: 1,
    name: "Yung",
  },
  {
    id: 2,
    name: "Lean",
  },
  {
    id: 3,
    name: "Kyoto",
  },
  {
    id: 4,
    name: "Sesh",
  },
]);
export default {
  props: {
    id: Number,
  },
  setup(props) {
    const user = useStoreMap({
      store: $users,
      keys: () => props.id,
      fn: (users, userId) => users.find(({ id }) => id === userId),
    });
    return { user };
  },
};

<div>
  <strong>[{user.id}]</strong> {user.name}
</div>

const $ids = createStore(data.map(({ id }) => id));
export default {
  setup() {
    const ids = useStore($ids);
    return { ids };
  },
};

<div>
  <User v-for="id in ids" :key="id" :id="id" />
</div>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4