Apakah itu pengurusan negeri? Mari kita bincangkan tentang cara menggunakan Vuex untuk pengurusan negeri

Apakah itu pengurusan negeri? Artikel berikut akan membawa anda melalui pengurusan negeri Vuex dan bercakap tentang cara menggunakan Vuex untuk pengurusan negeri saya harap ia akan membantu anda.

? 1. Apakah itu pengurusan negeri

Dalam pembangunan, aplikasi kami perlu memproses pelbagai data, dan data ini perlu disimpan Pada lokasi tertentu dalam aplikasi kami, pengurusan data ini dipanggil pengurusan negeri. (Belajar perkongsian video: tutorial video vue)

Pelaksanaan asas pengurusan negeri Vuex (ilustrasi rasmi digunakan di sini)

⏰ Penggunaan Vuex

1 Pasang vuex

npm install vuex

2 >

Stor pada asasnya ialah bekas -->

Storan keadaan Vuex adalah responsif Apabila keadaan dalam stor berubah, komponen yang bertindak balas juga akan dikemas kini.

// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"

const app = createApp(App)

app.user(store)
app.mount("#app")

// src/store/index.js
import { createStore } from "vuex"

const store = createStore({
  state: () => ({
    counter: 100
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})
export default store

//App.vue
<template>
  <div>
    <!-- store 中的counter -->
    <h2 id="方式一-模板-App当前计数-store-state-counter">方式一：模板:App当前计数: {{$store.state.counter}}</h2>
    <h2 id="方式二-optionsAPI中的computed使用-storeCounter">方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
    <h2 id="方式三-在compositionAPI中setup函数使用-counter">方式三：在compositionAPI中setup函数使用:{{counter}}</h2>
    <button>+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    storeCounter () {
      return this.store.state.counter
    }
  }
}
</script>

<script>
import { toRefs } from &#39;vue&#39;
import { useStore } from &#39;vuex&#39;

const store = useStore()
const { counter } = toRefs(store.state)

function increment () {
  store.commit("increment")
}

</script>
 
<style></style>

?Pokok keadaan tunggal dan mapState fungsi bantu

1 🎜> bermakna setiap aplikasi mengandungi hanya satu

stor

contoh

Kelebihan: Jika maklumat status mengandungi berbilang objek contoh kedai, maka penyelenggaraan Ia akan menjadi lebih menyusahkan untuk diuruskan.

Pokok keadaan tunggal

ialah cara paling langsung untuk kita mencari serpihan keadaan tertentu, jadi lebih mudah untuk dikekalkan

2 🎜>

Jika anda perlu mendapatkan berbilang keadaan, anda boleh menggunakan fungsi bantu mapSate

Terdapat dua cara iaitu menggunakan mapState dalam optionsAPI dan komposisi API

Penggunaan asas getter

1 Senario: Apabila kita perlu menggunakan beberapa atribut dalam stor selepas beberapa siri perubahan, kita boleh memilih untuk menggunakan getter

2. getters Dua parameter

Dalam senario di atas, parameter pertama yang diterima oleh getter ialah keadaan dan getter juga boleh menerima parameter kedua

3 . Fungsi pulangan getter (pemahaman)

Fungsi itu sendiri dalam getter boleh mengembalikan fungsi, maka ia bersamaan dengan memanggil fungsi ini di mana ia digunakan

4. Fungsi tambahan mapGetters

Penggunaan asas mutasi

Satu-satunya cara untuk menukar keadaan kedai dalam vuex adalah dengan menyerahkan mutasi

Nota: Mutasi dibatalkan dalam pinia, yang akan dibincangkan kemudian. API komposisi vue3 akan lebih baik daripada vuex, jadi di sini kami menggunakan API pilihan untuk menunjukkan

1. mutasi Membawa data

Banyak kali kita akan membawa beberapa data apabila menghantar mutasi Pada masa ini, kita boleh menggunakannya seperti ini

2. mutasi Prinsip penting

mutasi mestilah fungsi segerak, iaitu fungsi tak segerak (seperti menghantar permintaan rangkaian) tidak dibenarkan

? Penggunaan asas tindakan

Tindakan serupa dengan mutasi, kecuali:

Tindakan menyerahkan mutasi dan bukannya mengubah keadaan secara langsung; >

Tindakan boleh mengandungi sebarang operasi Tak segerak;

parameter

konteks

:
• • konteks ialah objek konteks yang mempunyai kaedah dan sifat yang sama seperti contoh kedai;
  • boleh mendapatkan kaedah komit daripadanya untuk menyerahkan mutasi, atau melalui context.state dan context.getters; Dapatkan keadaan dan pengambil;

  1. 2. Fungsi bantu tindakan

  

  

  3. >

  ? Penggunaan asas modul

  Disebabkan penggunaan pokok keadaan tunggal, semua keadaan aplikasi akan tertumpu kepada objek yang agak besar sangat kompleks, objek kedai Ia boleh menjadi agak kembung. Jadi Vuex membenarkan kami membahagikan kedai kepada modul.

  Setiap modul mempunyai keadaan, mutasi, tindakan, pengambil dan juga sub-modul bersarangnya sendiri

  1 Keadaan setempat modul

  Untuk mutasi dan getter di dalam modul, parameter pertama yang diterima ialah objek keadaan setempat modul.

  2. Ruang nama modul

  Secara lalai, tindakan dan mutasi di dalam modul masih didaftarkan dalam global ruang nama. Jadi nama tidak boleh diulang

  Jika kita mahu modul mempunyai tahap enkapsulasi dan kebolehgunaan semula yang lebih tinggi, kita boleh menambah ruang nama: true untuk menjadikannya modul dengan ruang nama: Apabila modul Selepas didaftarkan, semua getter, tindakan dan mutasinya akan dinamakan secara automatik mengikut laluan yang didaftarkan oleh modul.

  3. modul mengubah suai atau menghantar komponen akar

  Ubah suai keadaan dalam akar dalam tindakan, kemudian terdapat kaedah berikut:

  (Mempelajari perkongsian video: pembangunan bahagian hadapan web,

  Video pengaturcaraan asas

  )

Atas ialah kandungan terperinci Apakah itu pengurusan negeri? Mari kita bincangkan tentang cara menggunakan Vuex untuk pengurusan negeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!