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

Methods

useStoreMap($store, fn)

Formulae

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

Arguments

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

Returns

(ComputedRef<Result>)

useStoreMap(config)

Formulae

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

Arguments

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

Returns

(ComputedRef<Result>)

Examples

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

User.vue

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>

App.vue

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>