Gunakan komponen keep-alive untuk melaksanakan pengurusan keadaan peringkat halaman vue

Gunakan komponen keep-alive untuk melaksanakan pengurusan keadaan peringkat halaman Vue

Dalam Vue, pengurusan negeri ialah topik penting. Biasanya, kami menggunakan Vuex untuk mengurus keadaan global. Tetapi kadangkala, kita mungkin perlu berkongsi keadaan antara halaman yang berbeza dan bukannya keadaan global. Pada masa ini, kami boleh menggunakan komponen keep-alive Vue untuk melaksanakan pengurusan keadaan peringkat halaman.

komponen kekal hidup ialah komponen abstrak yang disediakan oleh Vue, yang boleh cache contoh komponen dinamik dan mengekalkan keadaannya apabila komponen bertukar. Dengan menggunakan komponen keep-alive, kami boleh melaksanakan pengurusan keadaan peringkat halaman dengan mudah.

Di bawah, saya akan menggunakan contoh untuk menunjukkan cara menggunakan komponen keep-alive untuk melaksanakan pengurusan keadaan peringkat halaman.

Pertama, kami mencipta aplikasi Vue yang ringkas dan mentakrifkan dua komponen dalam App.vue: Laman Utama dan Profil.

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Seterusnya, kami mengkonfigurasi laluan dalam main.js dan membalut paparan laluan dengan komponen keep-alive.

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import Profile from './components/Profile.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/profile', component: Profile }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dalam Home.vue, kami mentakrifkan komponen pembilang mudah dan membalutnya dengan komponen kekal hidup.

<template>
  <div>
    <h2>Home</h2>
    <keep-alive>
      <Counter :count="count" />
    </keep-alive>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'Home',
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Dalam Profile.vue, kami juga mentakrifkan komponen pembilang dan membalutnya dengan komponen keep-alive.

<template>
  <div>
    <h2>Profile</h2>
    <keep-alive>
      <Counter :count="count" />
    </keep-alive>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'Profile',
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Akhir sekali, kami mentakrifkan komponen kaunter Counter.vue, yang menerima harta kiraan dan memaparkan nilai semasa kaunter.

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

Kini, kami boleh menjalankan aplikasi dan menguji pengurusan keadaan peringkat halaman.

Apabila kita mengklik butang "Kenaikan" pada halaman Utama, hanya kaunter di halaman Utama akan meningkat. Walau bagaimanapun, apabila kita beralih ke halaman Profil dan kembali ke halaman Utama, nilai kaunter dalam halaman Utama kekal tidak berubah.

Menggunakan komponen keep-alive boleh mencapai pengurusan status peringkat halaman dengan mudah. Ia secara automatik menyimpan contoh komponen dinamik dan mengekalkan keadaannya apabila komponen bertukar. Dengan cara ini, kita boleh berkongsi keadaan antara halaman yang berbeza.

Dalam contoh ini, kami menggunakan komponen keep-alive untuk melaksanakan pengurusan keadaan peringkat halaman, tetapi prinsip itu juga boleh digunakan pada senario lain. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan komponen keep-alive Vue.

Atas ialah kandungan terperinci Gunakan komponen keep-alive untuk melaksanakan pengurusan keadaan peringkat halaman vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!