Skip to content

Files

Latest commit

0ee58c5 Β· Mar 17, 2021

History

History
51 lines (41 loc) Β· 1.27 KB

useMethods.md

File metadata and controls

51 lines (41 loc) Β· 1.27 KB

useMethods

Vue hook that simplifies the useReducer implementation.

Usage

import { useMethods } from 'vue-next-use';

const Demo = {
    setup(props) {
        const initialState = {
            count: 0,
        };

        function createMethods(state) {
            return {
                reset() {
                    return initialState;
                },
                increment() {
                    return {...state, count: state.count + 1};
                },
                decrement() {
                    return {...state, count: state.count - 1};
                },
            };
        }

        const [state, methods] = useMethods(createMethods, initialState);

        return () => (
            <>
                <p>Count: {state.value.count}</p>
                <button onClick={methods.decrement}>-</button>
                <button onClick={methods.increment}>+</button>
                <button onClick={methods.reset}>reset</button>
            </>
        );
    }
};

Reference

const [state, methods] = useMethods(createMethods, initialState);
  • createMethods β€” function that takes current state and return an object containing methods that return updated state.
  • initialState β€” initial value of the state.