vue和vuex getter与通过道具传递状态

这会造成混乱,你是对的。这是vuex解决的问题之一。

那么,您如何决定是传递道具还是使用vuex?当我说使用vuex时,我的意思是直接从需要的组件访问存储数据。诀窍是考虑每个数据段与整个应用程序的关系。

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

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

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

https://vuejs.org/v2/api/#vm-attrs

以及它的兄弟选项 inheritAttrs .

https://vuejs.org/v2/api/#inheritAttrs

结合使用这两种方法,可以用更少的样板代码将道具传递到多个组件级别。

在每个组件中,您都可以访问对象 this.$store 所以你可以调度 actions ,通过提交数据 mutations 或通过 getters

Read the documentation for further details:

通过向根实例提供存储选项,存储将 注入根的所有子组件,并将可用 在他们身上$百货商店

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