useStoreMap

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, fn)

Common use case: subscribe to changes in selected part of store only

Formulae

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

Arguments

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

Returns

(Result)

useStoreMap(config)

Formulae

useStoreMap({ store, keys, fn });

Arguments

1. params (Object): Configuration object
   • store: Source store
   • keys (Function): Will be passed to fn selector
   • fn ((state, keys) => result): Selector function to receive part of source store

Returns

(ComputedRef<Result>)

Example

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 data = [
  {
    id: 1,
    name: "Yung",
  },
  {
    id: 2,
    name: "Lean",
  },
  {
    id: 3,
    name: "Kyoto",
  },
  {
    id: 4,
    name: "Sesh",
  },
];

const $users = createStore(data);

export default {
  props: {
    id: Number,
  },
  setup(props) {
    const user = useStoreMap({
      store: $users,
      keys: () => props.id,
      fn: (users, userId) => users.find(({ id }) => id === userId),
    });
  },
};

<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>