vue3-hook-store
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

vue3-hook-store

将 hook 缓存, 多个组件共享

GitHub license npm version

解决的问题:

兄弟或父子组件间 hook 数据共享

安装

npm install vue3-hook-store

开始使用

// hook.ts
import { ref } from "vue";
import { createModel, createProvideModel } from "vue3-hook-store";

const testHook = (starNumber = 0) => {
  const count = ref(starNumber);
  const add = () => {
    count.value++;
  };

  return { count, add };
};

export const testHookModel = createProvideModel(testHook);
// or
// export const testHookModel = createModel(testHook);
// test.vue
<template>
  <div class="test">
    {{ count }}
  </div>
</template>

<script lang="ts">
import { testHookModel } from "./hook";
export default {
  setup() {
    const { count, add } = testHookModel();

    return { count, add };
  },
};
</script>

注意事项

  1. createProvideModel: 基于 provide 的 Hook 共享

    • 限制: 必须有个父组件先引用
    • 优点: 父组件销毁即销毁
    • 缺点: 同级(兄弟)兄弟组件不能可以共享
  2. createModel: Hook 共享

    • 限制: hook 内请勿使用生命周期钩子
    • 优点: 同级(兄弟)兄弟组件可以共享
    • 缺点: 1. 页面跳转时两个页面都有引用时不会销毁; 2, 由 1 引发的声明周期异常

Readme

Keywords

Package Sidebar

Install

npm i vue3-hook-store

Weekly Downloads

1

Version

0.1.0

License

MIT

Unpacked Size

22.9 kB

Total Files

12

Last publish

Collaborators

  • shenty