How to composable with reusable composition functions

[jackhe16]

I have a scenario where multiple pages need to reuse the same table logic.

Example:

https://github.com/jackhe16/pinia-with-composition-api

[posva]

You should accept a ref as a parameter and pass in a ref of the store state:

export function useTable(apiUrl: string, stateRef?: Ref<{ total: number, query: Record<string, any>, list: string[] }) {
  const state = ref<{
    total: number;
    query: Record<string, any>;
    list: string[];
// the ref() will reuse the passed ref if it's a ref already, without creating a new one
  }>(stateRef || {
    total: 0,
    query: {
      page: 1,
      size: 10,
    },
    list: [],
  });

  function fetchList() {
    state.value.total = 100;
    state.value.list = [];
  }

  function resetQuery() {
    state.value.query = {
      page: 1,
      size: 10,
    };
  }

  return {
    state,
    fetchList,
    resetQuery,
  };
}

and then use it with your store

const useStore = defineStore({
id: 'table',
state: () => ({ table: {
// ...
}})

const store = useStore()
useTable('/api/table', toRef(store, 'table')

[jackhe16]

thanks, It's still a little hard to write and understand ..

I'm just looking for something simple like this

ministore.ts

import { watch } from "vue";
import { useLocalStorage } from "@vueuse/core";

import { LifeCycles, useLifeCycles, UseLifeCycleResult } from "./useLifeCycles";

export function createStore<
  T extends {
    state?: Record<string, any>;
  } & LifeCycles
>(
  useFunction: () => T,
  persistName?: string
): T & { useLifeCycles: () => UseLifeCycleResult } {
  const ctx = useFunction();

  const store = useLocalStorage<Record<string, any>>("store", {});
  if (persistName && ctx.state) {
    if (!store.value[persistName]) {
      store.value[persistName] = ctx.state;
    }
    watch(
      store,
      (nv) => {
        Object.assign(ctx.state, nv[persistName]);
      },
      {
        immediate: true,
      }
    );
    watch(
      () => ctx.state,
      (nv) => {
        store.value[persistName] = nv;
      },
      {
        deep: true,
      }
    );
  }

  return Object.assign(ctx, {
    useLifeCycles: useLifeCycles.bind(null, ctx),
  });
}

useLifeCycles.ts

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

import {
  RouteLocationNormalizedLoaded,
  Router,
  useRoute,
  useRouter,
} from "vue-router";

export type LifeCycles = {
  onSetup?: (route: RouteLocationNormalizedLoaded, router: Router) => void;
  onBeforeMount?: () => any;
  onMounted?: () => any;
  onBeforeUpdate?: () => any;
  onUpdated?: () => any;
  onBeforeUnmount?: () => any;
  onUnmounted?: () => any;
};

const lifeCycleMap = {
  onBeforeMount: onBeforeMount,
  onMounted: onMounted,
  onBeforeUpdate: onBeforeUpdate,
  onUpdated: onUpdated,
  onBeforeUnmount: onBeforeUnmount,
  onUnmounted: onUnmounted,
};

export type UseLifeCycleResult = {
  route: RouteLocationNormalizedLoaded;
  router: Router;
} & {
  [K in keyof typeof lifeCycleMap]: false | Function | undefined;
};

export function useLifeCycles(store: LifeCycles) {
  const route = useRoute();
  const router = useRouter();

  if (store.onSetup) {
    store.onSetup(route, router);
  }

  const lifeCycleKeys = Object.keys(
    lifeCycleMap
  ) as (keyof typeof lifeCycleMap)[];

  const lifeCycleResult = {} as UseLifeCycleResult;

  lifeCycleResult.route = route;
  lifeCycleResult.router = router;

  for (let i = 0; i < lifeCycleKeys.length; i += 1) {
    const lifeCycleKey = lifeCycleKeys[i];
    const callback = store[lifeCycleKey];
    const hook = lifeCycleMap[lifeCycleKey];
    if (callback) {
      lifeCycleResult[lifeCycleKey] = hook(callback);
    }
  }

  return lifeCycleResult;
}

Home.store.ts

import { reactive, ref } from "vue";
// import { biSyncRef } from "@vueuse/core";

import { createStore } from "./ministore";

export function useCounter() {
  // const state = reactive({
  //   count: 0,
  // });
  const state = ref({
    count: 0,
  });

  function increase() {
    state.value.count += 1;
  }

  function decrease() {
    state.value.count -= 1;
  }

  return {
    state,
    increase,
    decrease,
  };
}

export function useHomeStore() {
  const counter = useCounter();

  const state = reactive({
    age: 0,
    name: "",
    counter: counter.state, // ?? state.counter = { count: 12 }, maybe can't sync to counter.state when counter.state is reactive object instead of ref object
  });

  function updateName() {
    state.name = "jack";
  }

  function onSetup() {
    console.log("setup");
  }

  function onMounted() {
    console.log("onMounted");
  }

  return {
    counter,
    state,
    updateName,
    onSetup,
    onMounted,
  };
}

export const homeStore = createStore(useHomeStore, "useHomeStore");

Home.tsx

import { defineComponent } from "vue";

import { homeStore } from "./Home.store";

export default defineComponent({
  name: "Home",
  setup() {
    homeStore.useLifeCycles();

    return () => {
      return (
        <div class="home">
          <div
            onClick={() => {
              homeStore.counter.increase();
            }}
          >
            Click
          </div>
          <div>{homeStore.state.counter.count}</div>
          <div>{homeStore.counter.state.value.count}</div>
        </div>
      );
    };
  },
});

[posva]

I've fixed some bugs and updated the docs about how to add refs to the store: https://pinia.esm.dev/core-concepts/plugins.html#adding-new-state