Перейти к основному содержимому

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>