(Mis-)use of global properties?

[fhnaumann]

I'm writing a fairly "simple" website that lets the user choose different settings in a gamemode. Every setting will be combined into one big JSON object to represent the specific settings the user made (e.g.):

{
    rules: {
        NoBlockBreak: {
            name: "NoBlockBreak",
            active: false,
            settings: {},
            punishments: {
                End: {
                    name: "End",
                    active: false,
                    affects: "All"
                },
                Death: {
                    name: "Death",
                    active: false,
                    affects: "All"
                },
                Health: {
                    name: "Health",
                    amountLost: 1,
                    active: false,
                    affects: "All"
                },
                RandomEffect: {
                    name: "RandomEffect",
                    effectsAtOnce: 1,
                    active: false,
                    affects: "All"
                }
            }
        }
    }
}

I have developed different components for different UI parts. For example there is a component for all Rules, which contains individual components where each represents a specific rule (e.g. "NoBlockBreak"). This component then includes other nested components for the punishments.

I am unsure how to store the configuration. I started off by only giving each component the "minimum" data they need to know to function. Emit events would then notify the parent component of any changes. However, this quickly became overwhelmingly complicated for me. Then I thought about using one giant object to represent the state of all settings. In order to keep the reactivity I added a local variable that is a "copy" (or reference?) of the global variable. Lets say the global variable in the beginning is named "$config", I would then add

    data() {
        return {
            localConfig: getCurrentInstance().appContext.config.globalProperties.$config,
        }
    },

to every component where a local change should trigger some sort of update on other UI components.

Currently I am indecisive with what to go forward with. Any help is appreciated! :)

[zhaohui90-lee]

if you want to store the state, the vue have the official tool pinia, here the link: https://pinia.vuejs.org/

[fhnaumann]

Thanks for the hint.

[chenxch]

provide/inject
Not sure if I can solve your problem quickly?