useStore

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

since

useStore introduced in effector-vue 21.1.0

Subscribes to a store and returns its state as a readonly ref, so the component updates when the store changes. Change the state only through events. Designed for Vue 3.

useUnit($store) does the same and also handles events, effects and shapes of units.

`useStore($store, options?)`

Formulae

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

Arguments

$store (Store<State>)
options? (Object): { scope, forceScope }, the same scope options as useUnit takes

since

options argument introduced in effector-vue 23.3.0

Returns

(Readonly<Ref<State>>): a shallow readonly ref whose value is the state of the store itself

since

The ref is shallow since effector-vue 23.3.0. Before that value was a deep readonly proxy over the state

Example

import { createStore, createApi } from "effector";

export const $counter = createStore(0);

export const { incremented, decremented } = createApi($counter, {
  incremented: (count) => count + 1,
  decremented: (count) => count - 1,
});

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