[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>