vue-function-api + Vue-hooks + spread operator examples about vue-hooks

[u3u]

Hi, you can refer to this example:

<script>
import { createComponent } from 'vue-function-api';
import { useState, useGetters, useMutations, useActions } from '@u3u/vue-hooks';

export default createComponent({
  name: 'App',

  setup() {
    const state = {
      ...useState(['count']),
    };

    const getters = {
      ...useGetters(['plusOne']),
    };

    const mutations = {
      ...useMutations(['increment', 'decrement']),
    };

    const actions = {
      ...useActions(['incrementAsync', 'decrementAsync']),
    };

    return {
      ...state,
      ...getters,

      state,
      getters,
      mutations,
      actions,
    };
  },

  render() {
    const { count, plusOne, state, getters, mutations, actions } = this;
    console.log(count); // number
    console.log(plusOne); // number
    console.log(state.count); // ComputedWrapper
    console.log(getters.plusOne); // ComputedWrapper

    return (
      <div id="app">
        <div>count(state): {count}</div>
        <div>plusOne(getters): {plusOne}</div>
        <button onClick={() => mutations.increment()}>increment</button>
        <button onClick={() => mutations.decrement()}>decrement</button>
        <button onClick={() => actions.incrementAsync()}>incrementAsync</button>
        <button onClick={() => actions.decrementAsync()}>decrementAsync</button>
      </div>
    );
  },
});
</script>

[ChrisMichaelPerezSantiago]

Regard @u3u ,

I recommend if you can, add that type of structure (example) as documentation for official use.

[u3u]

Yes, I am writing documentation and examples.
I usually work very busy, only available on weekends. 😅

[u3u]

Welcome to visit: https://vue-hooks.netlify.com