javascript - Vuex:直接访问商店还是传递属性？

Question

我正在将一个纯 Vue 应用程序迁移到 Vuex，但我不确定将数据传递到下游组件的最佳方式。 Vue 的方式是将它们作为属性传递:

<component :my-prop="myProp"/>

Vuex 的方式好像是直接访问store:

computed: {
    myProp: function() {
        return this.$store.state.myProp;
    }
}

Vuex 方式不是倾向于将 View (组件)和数据(存储)层耦合得更紧密吗？另一方面，向下游传递属性可能会有点痛苦。

在 Vuex 中访问商店数据的推荐方式是什么？

Answer 1

不确定“官方”建议，但我个人更喜欢使用属性。这样，您就可以将组件与商店分离。例如。您的组件可以重复使用(在其他项目中，稍后等)并且没有商店作为依赖项。

如果商店发生变化，例如新版本的 VueX，稍后的另一个最佳实践，只有父级需要更改，您所有的组件都将以相同的方式运行。