What is different between Vuex store and direct update data on $root?

Question

I want to update the data to root instance from nested components. I know that use $emit can update the data to parent component. But it's no efficiency if the component inside many layers from root.

I took a look on Vuex and it seems solve this situation nicely. But I wonder why don't just set this.$root.value = newValue like the following:

// Root
new Vue({
    data: {
        value: ''
    }
})


// Nested Child
<template>
    <input type="text" @input="onInput" />
</template>

<script>
    export default {

        methods: {
            onInput: function(event){
                this.$root.value = event.target.value;
            },
        }
    }
</script>

I want to know that what's different between the two. Thanks.

Answer 1

VueX (or Pinia a lightweight alternative) act as powerful state management storage, not only allowing you to access the data from anywhere in your application (like a database) but also tieing additional logic to process or chain other actions to the data you're updating.

You can also organise your VueX store into multiple files to keep your codebase organised and ready to scale, meaning anyone jumping on to the project knows where to find globally accessible data.

Hope that helps inform your decision.