Vue和Vuex Getter与通过道具传递状态

vue.js Vue.js

阿飞Pro

2020-03-16

我见过很多人建议通过道具将状态传递给组件，而不是直接在组件内部访问vue状态，以使其更可重用。

但是，如果我始终如一地执行此操作，则意味着只有路由根组件才可以与商店通信，并且所有数据都需要通过嵌套层次结构传递才能获得最终组件。这似乎很容易造成混乱：

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

如何加载用户信用卡的数据？在资讯主页中将其一直传递到树下吗？

第1809篇《Vue和Vuex Getter与通过道具传递状态》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

小卤蛋猴子猪猪 2020.03.16

每个组件，无论其层次结构位置如何，都可以与商店进行通信。

在每个组件内部，您都可以访问该对象，this.$store因此可以actions通过调度，提交数据mutations或通过读取数据getters

通过为根实例提供store选项，该商店将被注入到根的所有子组件中，并将以this。$ store的形式在其上可用。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

TomTony 2020.03.16

这会造成混乱，您是正确的。这是vuex解决的问题之一。

那么，您如何决定是通过道具还是使用vuex？当我说使用vuex时，我的意思是直接从需要它的组件中访问商店数据。诀窍是要考虑每个数据与整个应用程序的关系。

在整个页面，多个DOM层次结构，不同页面等中重复使用的数据是使用vuex的理想情况。

另一方面，某些组件是如此紧密地耦合，以至于传递道具是显而易见的解决方案。例如，您有一个list-container组件，其直接子级是该list组件，并且两个组件都需要相同的列表数据。在这种情况下，我会将列表数据list作为道具传递给组件。

您可能对实例属性感兴趣 $attrs

以及它的兄弟选项inheritAttrs。

结合使用这两个选项，您可以使用更少的样板代码将道具向下传递到多个组件级别。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android