Bagaimana untuk menyelesaikan masalah 'Ralat: 'xxx' telah diisytiharkan sebagai harta data apabila menggunakan vuex dalam aplikasi Vue?

Dalam proses pembangunan aplikasi Vue, sangat biasa menggunakan vuex untuk mengurus status aplikasi. Walau bagaimanapun, dalam proses menggunakan vuex, kadangkala kita mungkin menghadapi mesej ralat seperti ini: "Ralat: 'xxx' telah pun diisytiharkan sebagai sifat data ini kelihatan membingungkan, tetapi ia sebenarnya disebabkan oleh ralat dalam Vue . Dalam komponen, ia disebabkan oleh penggunaan nama pembolehubah berulang untuk menentukan atribut data dan atribut keadaan vuex.

Jadi, bagaimana untuk menyelesaikan masalah ini? Di bawah ini saya akan membincangkan aspek-aspek berikut.

1 Fahami percanggahan nama pembolehubah dalam komponen vuex dan Vue

Pertama sekali, perlu jelas bahawa atribut data dalam komponen Vue, atribut keadaan vuex dan atribut yang dikira semuanya dianggap sebagai. Atribut keadaan Vue. Oleh itu, apabila menggunakan vuex, jika nama yang sama seperti dalam atribut data ditakrifkan, ia akan menyebabkan konflik nama berubah dan mesej ralat di atas akan muncul.

Sebagai contoh, dalam kod berikut, pembolehubah bernama kiraan ditakrifkan dalam atribut data, dan pembolehubah dengan nama yang sama juga ditakrifkan dalam keadaan vuex:

<template>
  <div>
    <h1 id="count">{{ count }}</h1>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    data() {
      return {
        count: 0
      }
    },
    computed: {
      ...mapState(['count'])
    }
  }
</script>

Pada masa ini, apabila menjalankan aplikasi Vue, mesej ralat di atas.

2. Penyelesaian 1: Ubah suai nama pembolehubah

Terdapat banyak cara untuk menyelesaikan masalah ini Salah satu kaedah yang mudah dan berkesan ialah mengubah suai nama pembolehubah pendua.

Dalam kod di atas, kita boleh menukar nama pembolehubah kira dalam atribut data kepada nama lain, seperti "dataCount", dan kemudian masalah konflik nama pembolehubah tidak akan berlaku lagi Kodnya adalah seperti berikut:

<template>
  <div>
    <h1 id="count">{{ count }}</h1>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    data() {
      return {
        dataCount: 0 // 把变量名改成dataCount
      }
    },
    computed: {
      ...mapState(['count'])
    }
  }
</script>

3. Penyelesaian Kedua: Gunakan atribut namespaced

Satu lagi cara untuk menyelesaikan masalah ini ialah menggunakan atribut namespaced dalam stor vuex. Tujuan atribut ini adalah untuk menentukan ruang nama untuk sifat keadaan vuex untuk mengelakkan konflik dengan nama pembolehubah dalam komponen Vue.

Sebagai contoh, kita boleh menukar atribut keadaan vuex dalam kod di atas kepada bentuk berikut:

const store = new Vuex.Store({
  namespaced: true, // 新增一个 namespaced 属性
  state: {
    count: 0
  }
})

Selepas mentakrifkan atribut keadaan vuex, kita juga perlu menentukan ruang nama apabila menggunakan fungsi mapState dalam komponen Vue. Sebagai contoh, ubah suai kod di atas seperti berikut:

<template>
  <div>
    <h1 id="count">{{ count }}</h1>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState({
        count: state => state.exampleModule.count // exampleModule 是命名空间
      })
    }
  }
</script>

Dengan menggunakan atribut namespaced, kita boleh mengelakkan masalah konflik nama berubah dan menjadikan kod lebih piawai dan jelas.

Ringkasan

Apabila menggunakan vuex dalam aplikasi Vue, adalah sangat penting untuk mengelakkan konflik nama berubah. Apabila mesej ralat "Ralat: 'xxx' telah diisytiharkan sebagai sifat data muncul, kami boleh menyelesaikan masalah ini dengan mengubah suai nama pembolehubah atau menggunakan atribut namespace. Untuk maklumat lanjut tentang cara menggunakan vuex, anda boleh merujuk kepada dokumentasi rasmi: https://vuex.vuejs.org/zh/

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah 'Ralat: 'xxx' telah diisytiharkan sebagai harta data apabila menggunakan vuex dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!