Bagaimana untuk menggunakan Vuex untuk pengurusan data dan perkongsian negeri?

Vuex ialah perpustakaan pengurusan negeri yang direka khas untuk Vue.js. Ia boleh membantu kami memudahkan pemindahan dan pengurusan data antara komponen dan meningkatkan kebolehselenggaraan dan kebolehskalaan aplikasi. Artikel ini akan memperkenalkan cara menggunakan Vuex untuk pengurusan data dan perkongsian negeri, dengan harapan dapat membantu semua orang memahami dan menggunakan Vuex dengan lebih baik.

1. Apakah itu Vuex?

Vuex ialah perpustakaan pengurusan negeri yang disediakan secara rasmi oleh Vue.js Ia menggunakan storan berpusat untuk mengurus keadaan semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan ketekalan keadaan. Dalam Vuex, kami boleh mengurus data kami dan menyatakan melalui gedung Kedai termasuk konsep teras berikut:

• nyatakan: data keadaan, digunakan untuk menyimpan pelbagai nilai keadaan dalam aplikasi
• getter: baca Dapatkan atribut yang dikira , digunakan untuk memperoleh beberapa nilai keadaan daripada stor;
• mutasi: mengubah suai keadaan secara serentak, digunakan untuk mengubah suai data secara serentak dalam keadaan
• tindakan: keadaan diubah suai tidak segerak, digunakan untuk memproses operasi tak segerak dan menyerahkan mutasi ;
• modul: Modularisasi, digunakan untuk membahagikan kedai besar kepada sub-modul yang lebih kecil dan mengurus status serta operasinya masing-masing.

2. Mengapa anda memerlukan Vuex?

Dalam aplikasi Vue.js, apabila tahap komponen terus meningkat, pemindahan data dan keadaan antara komponen akan menjadi semakin kompleks Pada masa ini, kami memerlukan perpustakaan pengurusan negeri untuk membantu kami mengurus dan berkongsi pelbagai nilai status ​dalam permohonan itu. Menggunakan Vuex boleh membawa faedah berikut:

1. Pengurusan negeri berpusat: setiap komponen boleh mengakses pepohon keadaan yang sama, menjadikan pengurusan negeri lebih bersatu dan berpusat
2. Penyelenggaraan dan penyahpepijatan yang mudah: Vuex boleh membantu kami memahami status dan data dengan lebih baik; aliran aplikasi, menjadikan penyahpepijatan dan penyelenggaraan lebih mudah
3. Meningkatkan kebolehbacaan dan kebolehselenggaraan kod: Menggunakan Vuex, aliran kawalan data boleh ditumpukan di satu tempat, menjadikan logik kod lebih cekap Jelas dan mudah diselenggara ;
4. Pemisahan logik perniagaan dan pengurusan keadaan: Dengan menyimpan keadaan dalam stor Vuex, pemisahan komponen logik perniagaan dan komponen pengurusan negeri boleh dicapai untuk memudahkan penyelenggaraan dan pengurusan.

3. Bagaimana cara menggunakan Vuex?

Sebelum menggunakan Vuex, anda perlu memasang perpustakaan Vuex dan memperkenalkannya dalam projek Vue:

npm install vuex --save

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

Vue.use(Vuex)

Seterusnya, kita perlu mencipta kedai Vuex dan mendaftarkannya dalam contoh Vue, seperti berikut:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    evenOrOdd(state) {
      return state.count % 2 === 0 ? 'even' : 'odd'
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
})

Dalam perkara di atas kod, kami Mencipta kedai Vuex yang mengandungi tiga konsep teras (keadaan, mutasi dan tindakan). Antaranya, keadaan digunakan untuk menyimpan data keadaan, mutasi digunakan untuk mengubah suai keadaan secara serentak, dan tindakan digunakan untuk memproses operasi tak segerak dan menyerahkan mutasi. Di sini, kami juga mentakrifkan pengambil yang mengira sama ada nilai kiraan dalam keadaan adalah genap atau ganjil.

Dalam contoh Vue, kami menggunakan atribut atribut dan kaedah yang dikira untuk mengakses keadaan, mutasi dan tindakan dalam stor. count dan evenOrOdd dalam atribut yang dikira dikira berdasarkan data sebenar dalam keadaan, manakala increment, decrement dan incrementAsync dalam atribut kaedah ialah kaedah yang digunakan untuk mengubah suai keadaan.

4. Penggunaan keadaan dan mutasi

keadaan adalah konsep teras Vuex Ia digunakan untuk menyimpan pelbagai nilai keadaan secara amnya, ia perlu diubahsuai melalui mutasi. Dalam Vuex, kita boleh mengakses dan mengubah suai keadaan dengan cara berikut:

1. Mengakses keadaan: Kita boleh mengakses keadaan dalam kedai melalui ini.$store.state Sebagai contoh, kiraan dalam kod contoh di atas ialah keadaan. .
2. Ubah suai keadaan secara langsung:
   Ubah suai keadaan secara langsung akan menyebabkan alat analisis statik Vuex melaporkan ralat, kerana prinsip Vuex ialah perubahan data dalam stor mesti melalui mutasi. Jika kita perlu mengubahsuai secara langsung nilai keadaan, kita perlu menggunakan Vue.set supaya pengubahsuaian boleh mencetuskan kemas kini UI secara responsif Kod sampel adalah seperti berikut:

Vue.set(state.obj, 'newProp', 123)

3. Ubah suai keadaan melalui mutasi:
   mutasi ialah koleksi. digunakan untuk mengubah suai keadaan Dalam Vuex ia adalah operasi segerak. Dengan melaksanakan mutasi, kita boleh sewenang-wenangnya mengubah suai nilai dalam negeri. Mutasi adalah satu-satunya cara untuk mengubah suai keadaan dalam Vuex Operasi tak segerak atau kesan sampingan lain tidak boleh dilakukan dalam mutasi. Kami boleh menyerahkan mutasi dengan cara berikut:

this.$store.commit('increment')   // 传入 mutation 的名称
this.$store.commit({
  type: 'increment',
  amount: 10    // 传入额外的参数
})

4. Penggunaan tindakan dan pengambil

Dalam aplikasi, kadangkala kita perlu melakukan beberapa operasi tak segerak, dalam kes ini, kita boleh menggunakan tindakan untuk mengendalikan, Tindakan boleh mengandungi sebarang asynchronous operasi, dan akhirnya data dalam keadaan perlu diubah suai dengan menyerahkan mutasi. Dalam Vuex, kami boleh mengendalikan tindakan dengan cara berikut:

1. Takrifkan tindakan:

actions: {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

2. Serahkan tindakan:

this.$store.dispatch('incrementAsync')

Dalam Vuex, getter boleh dianggap sebagai harta terkira di sesetengah kedai, iaitu Melalui beberapa negeri, nilai yang diperoleh daripada keadaan kedai, sejumlah besar pengiraan berulang dan kompleks secara logik boleh di-cache. Dalam Vuex, kita boleh menggunakan getter dengan cara berikut:

1. Takrifkan getter:

getters: {
  evenOrOdd(state) {
    return state.count % 2 === 0 ? 'even' : 'odd'
  }
}

2. Access getters:

this.$store.getters.evenOrOdd

5. Penggunaan modul

在 Vuex 中，如果我们的应用程序中存在大量的 state 和 mutations、actions 和 getters，单独存放到一个 store 中会极大地增加代码的复杂性和维护难度，此时我们可以使用 module 在 Vuex 中进行模块化管理。在 using module 模式中，每个模块都拥有自己的 state、mutations、actions 和 getters，从而让代码更加清晰明了、易于维护。使用 module 的方法和常规的 Vuex store 相似，只是需要在 Vuex.Store() 中添加模块，如下所示：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

如上代码所示，我们创建了一个名为 moduleA 的模块，然后在 store 中通过 modules 选项将其添加到了 Vuex 的 store 中。在组件中访问模块的 state、mutations、actions 和 getters，和访问常规的 Vuex store 中的一样，只需要在前面加上模块名即可，例如：

computed: {
  ...mapState('a', {
    count: state => state.count
  }),
  ...mapGetters('a', [
    'evenOrOdd'
  ])
},
methods: {
  ...mapMutations('a', [
    'increment'
  ]),
  ...mapActions('a', [
    'incrementAsync'
  ])
}

在组件中，使用 mapState、mapMutation、mapActions 和 mapGetters 进行访问和操作，可以更加方便和快捷地操作和维护模块的状态和数据。

六、总结

本文简要介绍了 Vue.js 的状态管理库 Vuex 的使用方法和常用场景，包括 state、mutation、action、getter 和 module 等几个核心概念的使用。Vuex 可以帮助我们有效地管理和共享应用程序中的各种状态值，提高代码的可维护性和可扩展性。在使用 Vuex 的过程中，我们还需要注意一些细节和坑点，如同步和异步操作、state 和 mutation 的使用规范等问题，需要认真掌握和注意。

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vuex untuk pengurusan data dan perkongsian negeri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!