Share binding between two ViewModels in Swift - swift

Question

I just got started with SwiftUI and I would like to use ViewModels to encapsulate my logic, and separate it from my Views.
Now I just hit my first roadblock and I am not sure how to get passed this.
So my app so far is fairly simple. I have two Views, each with their own ViewModels: Parent and Child.
The Parent ViewModel holds a list of Items, which are fetched from a backend API. I want to pass this to Child and its ViewModel, since it is responsible for adding Items to the list.
Here's the simplified code for this:
struct ParentView: View {
#StateObject private var viewModel = ViewModel()
var body: some View {
VStack {
ChildView()
Text("Items: \(viewModel.items.count)")
}
}
}
extension ParentView {
#MainActor class ViewModel: ObservableObject {
#Published var items: [Item] = []
}
}
struct ChildView: View {
#StateObject private var viewModel = ViewModel()
var body: some View {
List {
ForEach(viewModel.items) { item in
Text(item.name)
}
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
viewModel.AddItem()
} label: {
Label("Add item", systemImage: "plus")
}
}
}
}
}
extension ChildView {
#MainActor class ViewModel: ObservableObject {
#Published var items: [Item] = []
func AddItem() {
items.append(Item(name: "Test"))
}
}
}
How can I make it so that the list of items from the parent view model is passed down to the view model of the child, ensuring that there is only a single list, while also making sure that both views get refreshed when this list changes?
Thanks!

Answer 1

You must only have one source of truth, in your ParentView that you then pass to the child views. Currently you have multiple ViewModel that have no relations to each other.
In ChildView replace #StateObject private var viewModel = ViewModel() with
#ObservedObject var viewModel: ViewModel, and in ParentView,
use ChildView(viewModel: viewModel) to pass the ViewModel to it.
Remove also extension ChildView ... and take #MainActor class ViewModel: ObservableObject out of the extension ParentView.
Have a look at this link, it gives you some good examples of how to use ObservableObject and manage data in your app https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
EDIT-1:
Here is my full test example code to show how the parent view model
is passed down to the child view ...ensuring that there is only a single list, while also making sure that both views get refreshed when this list changes
struct ContentView: View {
var body: some View {
NavigationStack { // <-- here
ParentView()
}
}
}
struct Item: Identifiable {
let id = UUID()
var name:String
}
struct ParentView: View {
#StateObject var viewModel = ViewModel() // <-- here
var body: some View {
VStack {
ChildView(viewModel: viewModel) // <-- here
Text("Items: \(viewModel.items.count)")
}
}
}
// -- here
#MainActor class ViewModel: ObservableObject {
#Published var items: [Item] = [Item(name: "item-1"), Item(name: "item-2")]
}
struct ChildView: View {
#ObservedObject var viewModel: ViewModel // <-- here
var body: some View {
List {
ForEach(viewModel.items) { item in
Text(item.name)
}
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
viewModel.items.append(Item(name: "Test")) // <-- here
} label: {
Label("Add item", systemImage: "plus")
}
}
}
}
}