Morioh
Login
James Ellis

James Ellis

3 years ago

Vue3 reactivity based state manager

Widok

 Uses raw @vue/reactivity functions
 Supports Vuex-devtools
  Minimal overhead
 Allow directly state manipulation (without using mutation)

How it works

  • Use @vue/reactivity functions: ref and computed to keep state
  • Define some mutation function (do not use async like in actions)
  • export flat object with what you need
  • after creation of store exported ref/computed/mutations will be decorated and watched for changes

Usage

function cart() {
    const list = ref<{id: string, name: string, price: number}[]>([]);

    function addProduct(product) {
        list.value.push(product);
    }

    function removeProduct(product) {
        const index = list.value.findIndex(item => item.id === product.id);
        list.value.splice(index, 1);
    }

    function clear() {
        list.value = [];
    }

    const totalPrice = computed(() => {
        return list.value.reduce((total, item) => item.price, 0);
    });

    return { list, addProduct, removeProduct, clear, totalPrice };
}

function cartActions(cart: ReturnType<typeof cart>) {
    const cancel = watch(cart.list, () => console.log('list change'), {deep: true});

    onDestroyWidok(() => console.log('say bye!'));
    onDestroyWidok(cancel);

    return {
        async order() {
            await post('order', cart.list);
            cart.clear();
        }
    };
}

const useCart = defineWidok('cart', cart, cartActions);
//destroyWidok(useCart()) to run teardown logic and delete instance

API

defineWidok - create store and destroy hooks

defineWidok(
    name: string,
    stateFactory: () => T,
    managementFactory: (state: T) => R
): () => T & R
  • stateFactory - export refs, computed, mutations (wrap reactive with toRefs)
  • managementFactory - exports actions, define here some logic with watch etc.
  • return “use hook” to instance

destroyWidok(WidokInstance) - unregister store and call onDestroyWidok hook

onDestroyWidok(teardown: () => any) - lifecycle hook

configureWidok({ dev: boolean = true }) - set Widok configuration

isWidok(ref: any) - checks if is ref a Widok instance

Other info

ref

exported ref will be watched for changes

  • it is possible to mutating value outside stateFactory and emit [${store name}] ${ref fieldKey}

mutations

mutations are created from function exported by stateFactory. Commit type is a function.name or fieldKey of export

  • commit name - [${store name}] ${type}
  • if you use mutation inside other mutation it will be one commit

actions

actions are created from function exported by managementFactory. Dispatch type is a function.name or fieldKey of export

  • dispatch name - [${store name}] ${type}
  • cannot be created inside stateFactory because mutations are not decorated yet

Limitations

  • reactive is not supported, call toRefs(reactive) instead
  • vue-devtools are not ready yet for vue@3

Download Details:

Author: wszerad

Source Code: https://github.com/wszerad/widok

#vue #vuejs #javascript #vue3

Vue3 reactivity based state manager
3.00 GEEK