$ cnpm install vue3-reactive-store
一个轻巧的状态共享库, 基于vue3 reactive 创建
一种轻量,简单的方式实现全局共享, 支持 ts 类型推断
useModule, useStore, 简化代码npm install vue3-reactive-store
全局安装
// main.ts
import { createApp } from 'vue';
import App from './App';
import store from './store';
createApp(App).use(store).mount('#app');
// store.ts
import { createStore } from 'vue3-reactive-store';
const store = createStore();
export default store;
创建 reactive hook
// hook.ts
import { reactive } from 'vue';
import { exportGlobalModule } from 'vue3-reactive-store';
const testHook = (iniNum = 0) => {
const state = reactive({ num: iniNum })
const add = () => {
state.num++;
}
return {
state, add
}
}
export type HookFnType = typeof testHook;
export default exportGlobalModule<HookFnType>(testHook)
导入 reactive hook
import { useModule, useStore } from 'vue3-reactive-store';
export default defineComponent({
name: 'TestHook',
setup(props) {
const { state, add } = useModule<HookFnType, number>(hookModule, 10);
// 或者希望使用 store 时, 可以借助 `useStore`
// const store = useStore()
// const { state, add } = store.injectModule<HookFnType>(hookModule);
return {
state, add
}
},
});
Copyright 2013 - present © cnpmjs.org | Home |