useStore

useStore

import { useStore } from "effector-vue/composition";
since

useStore появился в effector-vue 21.1.0

Подписывается на стор и возвращает его состояние как readonly-ref, поэтому компонент обновляется при изменении стора. Меняйте состояние только через события. Для Vue 3.

useUnit($store) делает то же самое и вдобавок работает с событиями, эффектами и наборами юнитов.

useStore($store, options?)

Формула

useStore($store: Store<State>, options?: ScopeOptions): Readonly<Ref<State>>;

Аргументы

  1. $store (Store<State>)
  2. options? (Object): { scope, forceScope }, те же опции скоупа, что у useUnit
since

Аргумент options появился в effector-vue 23.3.0

Возвращает

(Readonly<Ref<State>>): неглубокий readonly-ref, его value это само состояние стора

since

Ref неглубокий с effector-vue 23.3.0. Раньше value был глубоким readonly-прокси над состоянием

Пример

model.ts
import { createStore, createApi } from "effector";


export const $counter = createStore(0);


export const { incremented, decremented } = createApi($counter, {
  incremented: (count) => count + 1,
  decremented: (count) => count - 1,
});
Counter.vue
<script setup lang="ts">
import { useStore, useUnit } from "effector-vue/composition";


import { $counter, incremented, decremented } from "./model";


const counter = useStore($counter);
const [onIncrement, onDecrement] = useUnit([incremented, decremented]);
</script>


<template>
  <button @click="onDecrement">-</button>
  <span>{{ counter }}</span>
  <button @click="onIncrement">+</button>
</template>
Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits