Vuex store 和 $root 直接更新数据有什么区别？

Question

我想将嵌套组件的数据更新到根实例。我知道使用 $emit 可以将数据更新到父组件。但是如果组件从根开始在很多层里面就没有效率了。

我看了一下 Vuex ，它似乎很好地解决了这个问题。但我想知道为什么不像下面这样设置 this.$root.value = newValue：

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

我想知道两者之间有什么不同。谢谢

Answer 1

VueX（或 Pinia，一种轻量级替代方案）充当强大的状态管理存储，不仅允许您从应用程序中的任何位置（如数据库）访问数据，而且还可以将附加逻辑与处理或链接其他操作联系起来您正在更新的数据。

您还可以将您的 VueX 存储组织成多个文件，以保持您的代码库井井有条并准备好扩展，这意味着任何参与该项目的人都知道在哪里可以找到全局可访问的数据。

希望对您的决定有所帮助。

Answer 2

我认为您绝对可以依赖 root state 本身，但是状态管理库可以通过多种方式帮助您组织代码。

由于使用单个状态树，您应用的所有状态都包含在一个大对象中。

随着您的应用程序变得越来越大，这个状态树变得非常难以处理。

例如，如果您有一个跨多个组件共享的真实来源，如下所示：

var sourceOfTruth = {}

var vmA = new Vue({
  data: sourceOfTruth
})

var vmB = new Vue({
  data: sourceOfTruth
})

工作完美，但两个组件都可以改变这个状态，所以祝你好运，如果状态在某处变脏，调试什么地方出错了。任何数据都可以随时被我们应用程序的任何部分更改，不留痕迹。

这本身就是使用状态管理库的一个很好的理由，但 vuex 还提供了其他有用的工具。

仅举几例：Vuex 允许您将商店划分为模块。每个模块都可以包含自己的状态、突变、动作、吸气剂，甚至嵌套模块。如果你想让你的模块更self-contained或可重用，你也可以用namespaces标记它。

希望我能为您澄清一点。状态管理棒棒哒！

有关详细信息，请查看文档：

https://v2.vuejs.org/v2/guide/state-management.html

https://vuex.vuejs.org/guide/modules.html

Vuex store 和 $root 直接更新数据有什么区别？

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

vue.js

vuex