James Ellis

James Ellis

1603191060

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

What is GEEK

Buddha Community

Vue3 reactivity based state manager
Tech Avidus

Tech Avidus

1604379605

Digital Assets Management Software Solution | AI-based Assets Management System

A Digital Asset Management System makes it easier to store, manage, and share all of your digital assets on cloud-based storage.

We help you to build Digital Asset Management (DAM) systems with your precise business requirements, whether you want one for maintaining management, production management, brand management systems, or implementing with your sales department with the digital assets it needs.

To learn more about how the Digital Asset Management system will help your business, email us at hello@techavidus.com

#digital assets management #assets management solution #digital asset management system #production management #brand management

Origin Scale

Origin Scale

1616572311

Originscale Order Management System

Originscale order management software helps to manage all your orders across channels in a single place. Originscale collects orders across multiple channels in real-time - online, offline, D2C, B2B, and more. View all your orders in one single window and process them with a simple click.

#order management system #ordering management system #order management software #free order management software #purchase order management software #best order management software

Revenue Cycle Management Software Services and Custom Integration - SISGAIN

Revenues come day in day out and it becomes strenuous to keep a track of them. With the help of Revenue cycle management software, one is able to perform the hospital revenue cycle management in Oklahoma, USA in a much simplified and easy manner. Our skilful developers and engineers created the healthcare revenue cycle management software that is convenient to use by its users and meets the customers requirement. We happen to be one of the notable revenue cycle management companies, facilitating the needs of our customers and being efficient and useful in performance. For more information call us at +18444455767 or email us at hello@sisgain.com

#revenue cycle management #revenue cycle management software #revenue cycle management companies #hospital revenue cycle management #revenue cycle management services #revenue cycle management solutions

James Ellis

James Ellis

1603191060

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

Origin Scale

Origin Scale

1619083348

Inventory Management Software

Originscale Inventory Management Software help you seamlessly integrates your sales channels and inventory locations to give your team complete and reliable inventory control. TRY FOR FREE Today

#inventory management #inventory management software #inventory management system #manufacturing inventory management #inventory control software #stock inventory management