[toc]
Svelte store and eventbus
- store
- eventbus
store
- import { Store,FragmentStore } from 'svelte-store-and-eventbus'
创建:
const fragment1 = FragmentStore({
name: "Fragment1",
state: {
message: "fragment1",
},
setState(listens) {
listens("Fragment1/state", ["Fragment1/message"], (data) => {})
},
methods(addMethod) {
addMethod("Fragment1/message", (data) => {
console.log(data)
})
},
})
const fragment2 = FragmentStore({
name: "Fragment2",
state: {
message: "fragment2",
},
setState(listens) {
listens("Fragment2/state", ["Fragment2/message"], (data) => {
console.log(data)
})
},
})
export const loginUser = Store({
fragmentMerges: {
fragment1,
fragment2,
},
state: {
loading: false,
user: null,
Nav_a: {
name: 1,
},
Nav_b: {
name: 2,
},
message: "null",
},
setState(listens) {
listens("loadingUser", ["loading", "user"], (data) => {
const { loading, user } = data
if (loading) {
return "loading"
} else if (user) {
return "login"
} else {
return "unlogin"
}
})
listens("nav", ["Nav/a", "Nav/b", "message"], (data) => {
const {
Nav: { a, b },
message,
} = data
console.log(a, b, message)
})
},
methods(addMethod) {
addMethod("fetchLogin", async ({ update, data }) => {
update("loading", true)
const res = await api.login(data.loginId, data.loginPwd)
update("user", res)
update("loading", false)
return res
})
addMethod("fetchWho", async ({ update }) => {
update("loading", true)
const res = await api.whoAmI()
update("user", res)
update("loading", false)
})
addMethod("fetchLoginOut", async ({ update }) => {
update("loading", true)
await api.loginOut()
update("user", null)
update("loading", false)
})
},
})
使用:
const { useStoreMethod, viewStore, getState } = loginUser()
// 查看仓库
const loading = viewStore("loading")
const user = viewStore("user")
const navAll = viewStore('Nav_')
const navA = viewStore("Nav/a")
const navb = viewStore("Nav/b")
const fragment1All = viewStore('Fragment1_')
const fragment1Message = viewStore("Fragment1/message")
const fragment2All = viewStore("Fragment2_")
const fragment2Message = viewStore("Fragment2/message")
// 读取 设置的状态
const nav = getState("nav")
const nav = getState("Fragment1/state")
// 使用 仓库中的方法
const fetchLogin = useStoreMethod("fetchLogin", {
loginId,
loginPwd,
})
const fragment1Message = useStoreMethod("Fragment1/message", '消息')
eventbus
- import { bus } from 'svelte-store-and-eventbus'
- listen
- emit
- off
// App.svelte
<A />
<B />
// A.svelte
// js
let msg = ""
const test = (data) => { msg = data }
bus.listen("a msg", test)
onDestroy(() => bus.off("a msg", test))
// html
<button on:click={() => bus.emit("b msg", "我是a组件发送过来的消息")}>
A组件传递数据按钮
</button>
<h1>{msg || "等待B组件传来消息"}</h1>
// B.svelte
// js
let msg = ""
const test = (data) => { msg = data }
bus.listen("b msg", test)
onDestroy(() => bus.off("b msg", test))
// html
<button on:click={() => bus.emit("a msg", "我是b组件发送过来的消息")}>
B组件传递数据按钮
</button>
<h1>{msg || "等待A组件传来消息"}</h1>