Vue.js 错误的组件结构-道具问题

我是个笨蛋，我正试着去了解vue.js。在一条特定的路线上，我有一个这样的视图

<template>
    <div class="section">
        <h1 class="title">Maintenance</h1>
        <app-tabs></app-tabs>
        <div class="columns">
            <div class="column is-one-third">
                <app-taglist></app-taglist>
            </div>
            <div class="column is-two-thirds">
                <app-form></app-form>
            </div>
        </div>
    </div>
</template>

<script>
import Taglist from "@/components/Taglist.vue";
import Tabs from "@/components/Tabs.vue";
import Form from "@/components/Form.vue";

export default {

}
</script>

维修
从“@/components/Taglist.vue”导入标记列表；
从“@/components/Tabs.vue”导入选项卡；
从“@/components/Form.vue”导入表单；
导出默认值{
}

现在我确实了解了将数据从组件传递到子组件的基础知识，但我实际上尝试的是将数据从应用程序选项卡传递到应用程序标记列表，从应用程序标记列表传递到应用程序表单。我开始认为我攻击这一切都是错误的，但如果我改变我的结构，让应用标签列表是应用标签的孩子，而应用表单是应用标签列表的孩子-我真的不能正确使用简单的bulma、响应、样式

顺便说一句：现在所有组件都是全局注册的

---

<> P>你会建议我注意什么？记住，我是NoOB。< /P> < P>一旦你开始处理多个组件之间的传递数据，我会考虑使用，以便从你的所有组件都可以访问全局组件状态。

基本上，您可以创建一个完全独立的“存储”来保存应用程序的状态（数据）：

然后从每个组件中，您可以：

• 使用“getter”从存储读取数据
• 使用“操作”分派将“改变”存储的异步函数

e、 g:

---

天啊。“真理的单一来源”。听起来很对。我还需要做更多的研究——但至少100%肯定我读的是正确的东西。非常感谢！天哪。太酷了。在20分钟内完成了。你是救命恩人@Nick Martin！

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment') // this is a mutation
console.log(store.state.count) // -> 1