Kaedah penyegerakan data senarai vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna dan kini merupakan salah satu rangka kerja paling popular dalam pembangunan bahagian hadapan. Dalam pembangunan Vue, penyegerakan data senarai adalah isu yang agak rumit Artikel ini akan memperkenalkan beberapa kaedah penyegerakan data senarai Vue.

1. Pemindahan data antara komponen

Dalam Vue, komponen ialah unit asas penggunaan semula kod dan organisasi logik, dan pemindahan data antara komponen memerlukan penggunaan atribut props dan peristiwa pemancar . Dalam penyegerakan data senarai, komponen induk menghantar data kepada komponen anak melalui atribut props Selepas komponen anak mengubah suai data, ia menghantar data kepada komponen induk melalui acara emit, dengan itu merealisasikan penyegerakan senarai. data.

Apabila menggunakan atribut props, anda perlu memberi perhatian kepada perkara berikut:

1. Data yang diisytiharkan oleh props dalam komponen tidak membenarkan pengubahsuaian langsung oleh sub-komponen untuk mengelakkan data kekeliruan.
2. Komponen induk mengikat data pada atribut props melalui arahan v-bind, supaya ia boleh digunakan dalam komponen anak.
3. Komponen anak mencetuskan acara yang didaftarkan oleh komponen induk melalui kaedah $emit dan menghantar data yang diubah suai.

Kod sampel adalah seperti berikut:

Komponen induk:

<template>
  <div>
    <child-component :list="list" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  methods: {
    handleChange(newList) {
      this.list = newList;
    }
  },
  components: {
    ChildComponent
  }
};
</script>

Komponen anak:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    handleInputChange(item) {
      this.$emit('change', this.list);
    }
  }
};
</script>

Dalam kod di atas, komponen induk dilalui melalui atribut props Data senarai diberikan kepada subkomponen, dan data senarai diberikan dalam subkomponen melalui arahan v-for Apabila kotak input dalam subkomponen berubah, peristiwa perubahan yang didaftarkan oleh komponen induk dicetuskan melalui kaedah $emit, dan data senarai yang diubah suai dipindahkan ke komponen induk.

2. Pengurusan negeri Vuex

Vuex ialah perpustakaan pengurusan negeri yang disediakan secara rasmi oleh Vue Ia merealisasikan fungsi perkongsian data dan status antara komponen dengan menyimpan dan mengurus keadaan semua komponen permohonan itu. Dalam penyegerakan data senarai, perkongsian dan penyegerakan data senarai boleh dicapai melalui Vuex.

Apabila menggunakan Vuex, anda perlu memberi perhatian kepada perkara berikut:

1. Anda perlu memperkenalkan perpustakaan Vuex ke dalam aplikasi Vue dan mendaftarkan contoh kedai.
2. Data senarai hendaklah disimpan dalam keadaan Vuex.
3. Komponen boleh mengakses dan mengubah suai data dalam negeri melalui Vuex untuk mencapai penyegerakan.

Kod sampel adalah seperti berikut:

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    list: [
      { id: 1, name: 'Vue' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' }
    ]
  },
  mutations: {
    updateList(state, newList) {
      state.list = newList;
    }
  }
});

Komponen induk:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

Komponen kanak-kanak:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: mapState(['list']),
  methods: {
    ...mapMutations(['updateList']),
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

Dalam kod di atas, tatasusunan senarai ditakrifkan dalam keadaan Komponen induk tidak lagi menghantar data kepada komponen anak Komponen anak memperoleh data senarai dalam keadaan melalui fungsi mapState dan memaparkan data senarai. Apabila kotak input dalam subkomponen berubah, data senarai baharu diserahkan kepada kaedah updateList dalam mutasi melalui fungsi mapMutations, dengan itu mengemas kini data dalam keadaan.

3. $emit dan provide/inject

Dalam versi Vue2.2.0, API baharu untuk menyediakan dan menyuntik data ke dalam menyediakan/menyuntik ditambahkan melalui API ini, data dinamik antara komponen dapat direalisasikan Keupayaan menyuntik data. Dalam penyegerakan data senarai, perkongsian dan penyegerakan data boleh dicapai melalui menyediakan/menyuntik.

Apabila menggunakan API provide/inject, anda perlu memberi perhatian kepada perkara berikut:

1. Provide mentakrifkan data yang perlu dikongsi dan inject mengisytiharkan data yang diperlukan untuk disuntik.
2. Anda boleh menggunakan fungsi anak panah dalam menyediakan untuk mengikat data secara dinamik untuk mengemas kini data secara dinamik selepas data dikemas kini.
3. Adalah tidak digalakkan untuk menggunakan data reaktif dalam penyediaan, yang boleh menyebabkan kemas kini data tidak dapat diramalkan.

Kod sampel adalah seperti berikut:

Komponen induk:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  provide() {
    return {
      list: this.list,
      updateList: (newList) => {
        this.list = newList;
      }
    }
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Komponen anak:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['list', 'updateList'],
  methods: {
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

Dalam kod di atas, komponen induk menyediakan senarai melalui kaedah provide dan updateList untuk merealisasikan perkongsian dan penyegerakan data senarai. Dalam subkomponen, kaedah senarai dan senarai kemas kini yang perlu disuntik diisytiharkan melalui suntikan, untuk mengakses dan mengubah suai data senarai.

Kesimpulan

Melalui tiga kaedah di atas, data senarai Vue boleh disegerakkan Dalam aplikasi sebenar, kaedah yang berbeza boleh dipilih mengikut situasi tertentu untuk mencapai penyegerakan data. Antaranya, pemindahan data antara komponen adalah kaedah yang paling asas dan biasa digunakan, manakala Vuex dan provide/inject lebih sesuai untuk pengurusan negeri dan perkongsian data dalam aplikasi besar.

Atas ialah kandungan terperinci Kaedah penyegerakan data senarai vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!