Perkongsian praktikal tentang menggunakan vuex untuk mengurus status global dalam Vue

Vue ialah rangka kerja bahagian hadapan yang popular. Idea asasnya ialah membahagikan halaman kepada komponen yang berbeza, setiap komponen mempunyai keadaannya sendiri. Walau bagaimanapun, terdapat situasi di mana kita perlu berkongsi keadaan antara berbilang komponen. Untuk menangani situasi ini, Vue menyediakan vuex, perpustakaan pihak ketiga yang direka khusus untuk mengurus keadaan global aplikasi. Dalam artikel ini, kami akan berkongsi beberapa pengalaman praktikal menggunakan vuex dalam projek Vue.

Apakah itu Vuex?

Vuex ialah alat pengurusan negeri rasmi untuk Vue.js. Ia menggunakan storan berpusat untuk mengurus keadaan semua komponen aplikasi, dilaksanakan melalui satu objek.

Konsep teras Vuex termasuk:

• Negeri: Menyimpan keadaan peringkat aplikasi.
• Getter: Dapatkan nilai yang disimpan dalam keadaan dan lakukan pengiraan.
• Mutasi: Tukar nilai dalam keadaan.
• Tindakan: Serahkan mutasi dan lakukan operasi tak segerak.
• Modul: Uraikan stor kepada berbilang sub-modul, setiap modul boleh mempunyai keadaan, mutasi, tindakannya sendiri

Gunakan Vuex dalam projek Vue

Dalam pesanan Untuk menunjukkan proses penggunaan Vuex dalam projek Vue, kami akan mencipta contoh aplikasi mudah yang kami panggil "Senarai Tugasan" yang membolehkan kami menambah dan mengalih keluar tugas dan memaparkannya dalam senarai tugas. Di bawah ini kami akan memperkenalkan cara menggunakan Vuex untuk melaksanakan aplikasi Senarai Tugasan ini.

Pertama, untuk menggunakan Vuex, kami perlu mengimportnya dalam aplikasi Vue kami. Kami boleh mengimport dan menyuntik objek Vuex dalam main.js seperti berikut:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, index) {
      state.tasks.splice(index, 1)
    }
  }
})

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

Di sini, kami mula-mula mengimport Vuex dan menyuntiknya ke dalam objek Vue. Seterusnya, kami akan mencipta pemalar dipanggil kedai yang mencipta contoh storan Vuex baharu menggunakan pembina Vuex.Store. Di sini kami menentukan keadaan dan mutasi di kedai kami. Status kami ialah tatasusunan tugas, yang menyimpan tugasan dalam Senarai Tugasan kami. Mutasi kami termasuk addTask dan removeTask, yang digunakan untuk menambah dan mengalih keluar tugas masing-masing.

Kami juga menyuntik kedai ke dalam contoh Vue supaya kami boleh menggunakannya dalam semua komponen aplikasi kami. Kini, kami boleh mengakses keadaan dan mutasi dalam stor dalam komponen kami.

Dalam contoh aplikasi Senarai Tugasan kami, kami mempunyai komponen yang dipanggil AddTask.vue yang mengandungi borang yang membolehkan pengguna menambah tugasan. Dalam komponen ini, kami boleh menggunakan $store untuk mengakses keadaan dan mutasi dalam stor dan mencetuskan mutasi addTask kami untuk menambahkan tugasan ke stor. Kodnya adalah seperti berikut:

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="task" />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      this.$store.commit('addTask', this.task)
      this.task = ''
    }
  }
}
</script>

Di sini, kami menggunakan borang dalam komponen, dan apabila borang diserahkan, kami memanggil kaedah addTask dan menghantar nama tugas sebagai parameter kepada $store.commit kaedah. Ini mencetuskan mutasi addTask yang kami takrifkan sebelum ini untuk menambah tugasan ke kedai.

Seterusnya, kami mempunyai komponen TasksList.vue yang memaparkan senarai tugasan dan membenarkan pengguna memadamkan tugasan. Dalam komponen ini, kami boleh menggunakan $store untuk mengakses keadaan dan mutasi dalam stor dan mencetuskan mutasi removeTask kami untuk mengalih keluar tugas daripada kedai. Kodnya adalah seperti berikut:

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove Task</button>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    tasks() {
      return this.$store.state.tasks
    }
  },
  methods: {
    removeTask(index) {
      this.$store.commit('removeTask', index)
    }
  }
}
</script>

Di sini, kami menggunakan atribut yang dikira untuk mendapatkan status tatasusunan tugas dalam stor. Kami juga menggunakan arahan v-for dalam templat untuk memaparkan setiap tugasan dan menambah butang padam selepas setiap tugasan. Apabila pengguna mengklik butang padam, kami memanggil kaedah removeTask dan lulus indeks tugasan sebagai parameter kepada kaedah $store.commit. Ini mencetuskan mutasi removeTask yang kami takrifkan sebelum ini, yang mengalih keluar tugas daripada kedai.

Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan Vuex untuk mengurus keadaan global aplikasi kami dan menunjukkan cara menggunakannya dalam projek Vue melalui aplikasi Senarai Tugasan itu. Dalam projek Vue, menggunakan Vuex membolehkan kami mengurus dan berkongsi keadaan dengan lebih mudah, dan menjadikan kod kami lebih modular dan boleh dibaca. Jika anda juga sedang membangunkan projek Vue, anda mungkin ingin mempertimbangkan untuk menggunakan Vuex untuk mengurus keadaan permohonan anda dengan lebih baik!

Atas ialah kandungan terperinci Perkongsian praktikal tentang menggunakan vuex untuk mengurus status global dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!