Vue将变量与兄弟组件数据进行比较

Question

我正在使用Vue创建一个我有

的应用程序

• 应用程序组件
  • 创建用户表单组件
  • 用户组件

我的用户组件按住以下用户数组

4-County Electric Power Assn MS
ACTON WATER DISTRICT OFFICE MA
http://www.actonwater.com/customer-service/contact-us
1
null
http://www.4county.org/

我的用户数组在用户组件中包含不同的用户对象

  

在我的创建用户表单组件中我从我的API获取了一个id，这个id必须在users数组中是唯一的。问题是用户数组位于用户组件中。

因此，我不知道如何从我的兄弟组件中获取此用户数组。

谢谢！

Answer 1

正如有人在评论中提到的那样，如果你使用像Vuex这样的东西，你的生活将变得更加轻松：https://vuex.vuejs.org/en/

现在，人们经常通过说“＆＃34;它只是一个简单的应用程序，我不需要那种复杂性”来避免这种情况。但在我看来，如果React恰好是你的体验，那么Vuex非常简单，比Redux更简单。它将为您节省大量时间和代码。

这个概念很简单;将您的用户存储在顶级可访问商店中。现在，每个组件都可以到达商店而不是变得混乱，试图通过事件和道具将用户传递给彼此。

Vuex示例商店：

const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, credits: 1, name: "Michael", tagid: "1" },
      { id: 2, credits: 2, name: "Kate", tagid: "2" }
    ]
  },
  getters: {
    allUsers: state => {
      return state.users
    }
  }
})

组件示例从商店获取所有用户：

的JavaScript

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'allUsers'
    ])
  }
}

模板的

<template>
  <ul>
    <li v-for="user in allUsers" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

这是所有未经测试的示例代码，但希望您能看到我的目标。

如果您使用Vue.js Chrome extension或Vue.js devtools for Firefox，它内置了一个Vuex选项卡，可以让您检查商店，这也会非常有用。

祝你好运！