Bermula dengan Pembangunan VUE3: Menggunakan Pengurusan Negeri Vuex

VUE3 ialah generasi baharu rangka kerja VUE yang menarik, yang telah meningkatkan prestasi, kebolehselenggaraan dan pengalaman pembangunan. Dalam VUE3, Vuex ialah alat pengurusan keadaan yang sangat penting yang boleh membantu kami mengurus keadaan aplikasi dengan lebih baik.

Artikel ini akan memperkenalkan cara menggunakan Vuex dalam VUE3, termasuk cara membuat kedai Vuex, cara menggunakan Vuex dalam komponen, cara melakukan operasi tak segerak dalam Vuex, cara menggunakan pemalam, dsb.

Buat kedai Vuex

Pertama, kita perlu memasang Vuex:

npm install vuex@next

Seterusnya, buat kedai Vuex, kita boleh menciptanya dalam fail masukan VUE3 (seperti utama .js) Tambahkan kod berikut:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

Di sini kami telah mencipta tika VUE dengan menggunakan createApp dan kemudian menggunakan pemalam store untuk menambah gedung Vuex pada aplikasi. Sekarang kita perlu mencipta folder kedai, dan kemudian mencipta fail index.js di dalam:

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

Di sini, kita mula-mula mencipta kedai Vuex menggunakan fungsi createStore dan nyatakan keadaan awal count: 0. Kemudian, kami mentakrifkan mutasi bernama increment yang mengambil state sebagai parameter dan menambah state.count sebanyak 1. Akhir sekali, kami mengeksport kedai untuk digunakan dalam aplikasi.

Menggunakan Vuex dalam komponen

Sekarang kami telah mencipta kedai Vuex, kami akan menggunakannya dalam komponen. Kami akan menggunakan count dan incrementmutasi dalam komponen Kaunter.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

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

Di sini, kami mula-mula menggunakan sifat yang dikira count untuk mendapatkan nilai semasa store.state.count, dan kemudian menambah acara klik pada butang, memanggil incrementmutasi.

Kini kami boleh menggunakan komponen Kaunter dalam aplikasi kami dan ia akan bersambung secara automatik ke kedai Vuex.

Operasi tak segerak

Kadangkala, kita perlu melakukan operasi tak segerak dalam gedung Vuex, seperti menghantar permintaan HTTP. Dalam kes ini kita boleh menggunakan pilihan actions daripada kod contoh.

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

Di sini, kita mula-mula mentakrifkan mutasi bernama setTodos dan menetapkan parameter todos masuk kepada state.todos. Kami kemudian mentakrifkan operasi bernama actions menggunakan pilihan fetchTodos, yang akan mencetuskan operasi tak segerak untuk mendapatkan data todos dan memanggil commit untuk mencetuskan setTodosmutasi apabila selesai.

Menggunakan pemalam

Kami boleh menggunakan pemalam untuk melanjutkan fungsi gedung Vuex. Sebagai contoh, kita boleh menggunakan pemalam vuex-persistedstate untuk menjadikan kedai Vuex berterusan supaya keadaan kedai tidak ditetapkan semula setiap kali halaman dimuat semula.

Pertama, kita perlu memasang pemalam:

npm install vuex-persistedstate

Kemudian, kita boleh menambah pemalam ke kedai:

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

Di sini, kami mengimport vuex-persistedstate > fungsi dan kemudian tambahkannya ke kedai sebagai pemalam. createPersistedState

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan pengurusan keadaan Vuex dalam VUE3. Kami mempelajari cara membuat kedai Vuex, cara menggunakan Vuex dalam komponen, cara melaksanakan operasi tak segerak dalam Vuex dan cara menggunakan pemalam untuk melanjutkan fungsi Vuex.

Menggunakan Vuex boleh membantu kami mengurus keadaan aplikasi kami dengan lebih baik, menjadikan aplikasi kami lebih boleh diselenggara dan menyediakan asas yang lebih baik untuk pengembangan masa hadapan.

Atas ialah kandungan terperinci Bermula dengan Pembangunan VUE3: Menggunakan Pengurusan Negeri Vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!