How to share vanJS state across multiple components #274

HEAVYPOLY · 2024-02-25T22:50:54Z

HEAVYPOLY
Feb 25, 2024

I want to share state from pricing with other components like 'UserAvatar and Tools'. Is there a standard vanJS way to do this?

or if not, is there a way to get and set state from outside of const Pricing?

const Pricing
const UserAvatar
const Tools

UserAvatar and Tools live in totally different parts of the dom from pricing.

const Pricing = () => {
  const state = vanX.reactive({
    period: 'monthly,
    variant: 'platinum'
  })
}

Tao-VanJS · 2024-02-25T23:26:53Z

Tao-VanJS
Feb 25, 2024
Maintainer

I think you can just create a State object outside and pass it into different components Pricing, UserAvatar and Tools.

1 reply

HEAVYPOLY Feb 26, 2024
Author

That works, thanks!

RobinManoli · 2025-04-14T10:40:45Z

RobinManoli
Apr 14, 2025

This it not working for me. In my code, I want the header to be updated when I click the button, but only the button is updated:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.nomodule.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/van-x.nomodule.min.js"></script>

    <script>
        const { a, button, div, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, input, label, legend, li, nav, menu, option, p, pre, select, span, ul } = van.tags;
    </script>
</head>

<body>
    <header></header>
    <main></main>
    <script>
        const stateDefaultData = { view: "a" };
        const state = vanX.reactive(stateDefaultData)

        const header = () => {
            return nav(
                div(state.view)
            );
        };
        van.add(document.querySelector('header'), header());

        const view = () => {
            return div(
                () => {
                    switch (state.view) {
                        case "a":
                            return button({ onclick: () => state.view = "b", }, "this is a, go to b");
                        case "b":
                            return button({ onclick: () => state.view = "a", }, "this is b, go to a");
                        default:
                            return div("Unknown View");
                    }
                }
            );
        };
        van.add(document.querySelector('main'), view());
    </script>
</body>

</html>

1 reply

Tao-VanJS Apr 14, 2025
Maintainer

Your header component is problematic. Try this:

const header = () => {
    return nav(
        div(() => state.view)
    );
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to share vanJS state across multiple components #274

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to share vanJS state across multiple components #274

HEAVYPOLY Feb 25, 2024

Replies: 2 comments · 2 replies

Tao-VanJS Feb 25, 2024 Maintainer

HEAVYPOLY Feb 26, 2024 Author

RobinManoli Apr 14, 2025

Tao-VanJS Apr 14, 2025 Maintainer

HEAVYPOLY
Feb 25, 2024

Replies: 2 comments 2 replies

Tao-VanJS
Feb 25, 2024
Maintainer

HEAVYPOLY Feb 26, 2024
Author

RobinManoli
Apr 14, 2025

Tao-VanJS Apr 14, 2025
Maintainer