useStoreMap

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

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

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