Pengurusan status

Direktori

• Pelaksanaan rasmi pengurusan negeri seperti Flux

  • React pembangun sila rujuk maklumat berikut

• Mulakan dengan pengurusan status yang mudah

Pelaksanaan rasmi pengurusan negeri seperti Flux

Memandangkan negeri itu bertaburan dan diedarkan di antara banyak komponen dan interaksi antara komponen, kerumitan aplikasi yang besar secara beransur-ansur sering meningkat. Untuk menyelesaikan masalah ini, Vue menyediakan vuex: perpustakaan pengurusan negeri kami yang diilhamkan oleh Elm. vuex malah disepadukan ke dalam vue-devtools, membenarkan penyahpepijatan perjalanan masa
tanpa sebarang konfigurasi.

Pemaju React sila rujuk maklumat berikut

Jika anda seorang pembangun dari React, anda mungkin bimbang tentang perbezaan antara Vuex dan Redux ialah sebahagian daripada eco, Redux Pelaksanaan Fluks yang paling popular. Redux sebenarnya tidak menyedari lapisan paparan, jadi ia boleh digunakan dengan mudah dengan Vue melalui beberapa Simple Bindings. Perbezaan dengan Vuex ialah ia direka khusus untuk aplikasi Vue. Ini membolehkannya menyepadukan dengan lebih baik dengan Vue, sambil menyediakan API yang ringkas dan pengalaman pembangunan yang lebih baik.

Bermula dengan Pengurusan Negeri Mudah

Apa yang sering diabaikan ialah sumber sebenar objek data mentah dalam aplikasi Vue - apabila mengakses objek data, a Contoh Vue hanyalah akses proksi yang mudah. Jadi, jika anda mempunyai keadaan yang perlu dikongsi antara berbilang kejadian, anda boleh berkongsinya hanya dengan mengekalkan salinan data: 数据对象的实际来源 - 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

现在当 sourceOfTruth 发生变化，vmA 和 vmB 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 this.$root.$data

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

Sekarang apabila sourceOfTruth berubah, vmA< Kedua-dua /code> dan vmB akan mengemas kini paparan yang merujuknya secara automatik. Setiap tika komponen anak juga boleh diakses melalui this.$root.$data. Kini kami mempunyai satu sumber data, tetapi penyahpepijatan menjadi mimpi ngeri. Pada bila-bila masa, apabila sebarang data berubah dalam mana-mana bahagian aplikasi kami, tidak akan ada rekod perubahan itu. Untuk menyelesaikan masalah ini, kami menggunakan

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})