HarmonyOS MVVM模式，​viewmodel怎么和view建立关系的？

@Entry
@Component
struct ContactList {
    @State contacts: Contact[] = []; // 假设Contact是一个接口，定义了联系人的属性

    build() {
        ListView({
            items: this.contacts,
            itemBuilder: (contact) => {
                Text(contact.name)
                .fontSize(16)
                .onClick(() => {
                    // 编辑联系人逻辑
                });
            }
        });
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

//Index.ets 
import { Person, Address, AddressBook, ObservedArray} from '../viewmodel/ListViewModel' 
import emitter from '@ohos.events.emitter'; 
 
// 渲染出Person对象的名称和Observed数组<string>中的第一个号码 
// 为了更新电话号码，这里需要@ObjectLink person和@ObjectLink phones， 
// 不能使用this.person.phones，内部数组的更改不会被观察到。 
// 在AddressBookView、PersonEditView中的onClick更新selectedPerson 
@Component 
struct PersonView { 
  @ObjectLink person: Person; 
  @ObjectLink phones: ObservedArray<string>; 
  @Link selectedPerson: Person; 
 
  build() { 
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { 
      Text(this.person.name) 
      if (this.phones.length) { 
        Text(this.phones[0]) 
      } 
    } 
    .height(55) 
    .backgroundColor(this.selectedPerson.name == this.person.name ? "#ffa0a0" : "#ffffff") 
    .onClick(() => { 
      this.selectedPerson = this.person; 
    }) 
  } 
} 
 
@Component 
struct phonesNumber { 
  @ObjectLink phoneNumber: ObservedArray<string> 
 
  build() { 
    Column() { 
 
      ForEach(this.phoneNumber, 
        (phone: ResourceStr, index?: number) => { 
          TextInput({ text: phone }) 
            .width(150) 
            .onChange((value) => { 
              console.log(`${index}. ${value} value has changed`) 
              this.phoneNumber[index!] = value; 
            }) 
        }, 
        (phone: ResourceStr, index: number) => `${this.phoneNumber[index] + index}` 
      ) 
    } 
  } 
} 
 
 
 
// 渲染Person的详细信息 
// @Prop装饰的变量从父组件AddressBookView深拷贝数据，将变化保留在本地, TextInput的变化只会在本地副本上进行修改。 
// 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件 
@Component 
struct PersonEditView { 
  @Consume addrBook: AddressBook; 
  /* 指向父组件selectedPerson的引用 */ 
  @Link selectedPerson: Person; 
  /*在本地副本上编辑，直到点击保存*/ 
  @Prop name: string = ""; 
  @Prop address: Address = new Address("", 0, ""); 
  @Prop phones: ObservedArray<string> = []; 
 
  selectedPersonIndex(): number { 
    return this.addrBook.contacts.findIndex((person: Person) => person.id_ == this.selectedPerson.id_); 
  } 
 
  build() { 
    Column() { 
      TextInput({ text: this.name }) 
        .onChange((value) => { 
          this.name = value; 
        }) 
      TextInput({ text: this.address.street }) 
        .onChange((value) => { 
          this.address.street = value; 
        }) 
 
      TextInput({ text: this.address.city }) 
        .onChange((value) => { 
          this.address.city = value; 
        }) 
 
      TextInput({ text: this.address.zip.toString() }) 
        .onChange((value) => { 
          const result = Number.parseInt(value); 
          this.address.zip = Number.isNaN(result) ? 0 : result; 
        }) 
 
      if (this.phones.length > 0) { 
        phonesNumber({ phoneNumber: this.phones }) 
      } 
 
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { 
        Text("Save Changes") 
          .onClick(() => { 
            // 将本地副本更新的值赋值给指向父组件selectedPerson的引用 
            // 避免创建新对象，在现有属性上进行修改 
            this.selectedPerson.name = this.name; 
            this.selectedPerson.address = new Address(this.address.street, this.address.zip, this.address.city) 
            this.phones.forEach((phone: string, index: number) => { 
              this.selectedPerson.phones[index] = phone 
            }); 
            emitter.emit('setModelData', { 
              data: { 
                id: this.selectedPerson.id_, 
                name: this.name 
              } 
            }) 
          }) 
        Button('getData') 
          .onClick(() => { 
            emitter.emit('getModelData'); 
            this.selectedPerson = this.addrBook.me; 
          }) 
        if (this.selectedPersonIndex() != -1) { 
          Text("Delete Contact") 
            .onClick(() => { 
              let index = this.selectedPersonIndex(); 
              console.log(`delete contact at index ${index}`); 
 
              // 删除当前联系人 
              this.addrBook.contacts.splice(index, 1); 
 
              // 删除当前selectedPerson，选中态前移一位 
              index = (index < this.addrBook.contacts.length) ? index : index - 1; 
 
              // 如果contract被删除完，则设置me为选中态 
              this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me; 
            }) 
        } 
      } 
 
    } 
  } 
} 
 
@Component 
struct AddressBookView { 
  @ObjectLink me: Person; 
  @ObjectLink contacts: ObservedArray<Person>; 
  @State selectedPerson: Person = new Person("", "", 0, "", []); 
 
  aboutToAppear() { 
    this.selectedPerson = this.me; 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) { 
      Text("Me:") 
      PersonView({ 
        person: this.me, 
        phones: this.me.phones, 
        selectedPerson: this.selectedPerson 
      }) 
 
      Divider().height(8) 
 
      ForEach(this.contacts, (contact: Person) => { 
        PersonView({ 
          person: contact, 
          phones: contact.phones as ObservedArray<string>, 
          selectedPerson: this.selectedPerson 
        }) 
      }, 
        (contact: Person): string => { 
          return contact.id_; 
        } 
      ) 
 
      Divider().height(8) 
 
      Text("Edit:") 
      PersonEditView({ 
        selectedPerson: this.selectedPerson, 
        name: this.selectedPerson.name, 
        address: this.selectedPerson.address, 
        phones: this.selectedPerson.phones 
      }) 
    } 
    .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5) 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @StorageLink("contacts") @Watch("contactsChange") contacts: Array<Person> = []; 
  @Provide addrBook: AddressBook = new AddressBook( 
    new Person("Gigi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********", "18*********"]), 
    [ 
      new Person("Oly", "Itamerenkatu 9", 180, "Helsinki", ["11*********", "12*********"]), 
      new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["13*********", "14*********"]), 
      new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["15*********", "168*********"]), 
    ]); 
 
  contactsChange(propName: string): void { 
    this.addrBook.contacts = AppStorage.get(propName) as ObservedArray<Person>; 
  } 
 
 
  build() { 
    Column() { 
      AddressBookView({ 
        me: this.addrBook.me, 
        contacts: this.addrBook.contacts, 
        selectedPerson: this.addrBook.me 
      }) 
    } 
  } 
}
//viewmodel->ListViewModel.ets 
import emitter from '@ohos.events.emitter'; 
import { Person } from '../viewmodel/ListViewModel'; 
 
const data = [ 
  new Person("Oly1", "Itamerenkatu 9", 180, "Helsinki", ["11*********", "12*********"]), 
  new Person("Sam1", "Itamerenkatu 9", 180, "Helsinki", ["13*********", "14*********"]), 
  new Person("Vivi1", "Itamerenkatu 9", 180, "Helsinki", ["15*********", "168*********"]), 
]; 
 
export function init() { 
  emitter.on('getModelData', () => { 
    AppStorage.setOrCreate('contacts', data) 
  }) 
 
  emitter.on('setModelData', (eventData) => { 
    if (eventData.data) { 
      const changeId: string = eventData.data['id']; 
      data.forEach((person => { 
        if (person.id_ === changeId) { 
          person.name = eventData.data!['name']; 
        } 
      })) 
      AppStorage.setOrCreate('contacts', data) 
    } 
  }) 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.