Tutorial Bermula VUE3: Menggunakan Pengurusan Negeri Vuex untuk Melaksanakan Pengurusan Data Global

Dengan pembangunan berterusan Vue.js, Vue 3 juga telah dilancarkan secara rasmi dan secara beransur-ansur telah digunakan secara meluas Berbanding dengan Vue 2, Vue 3 mempunyai banyak pengoptimuman, seperti data proksi melalui objek Proksi untuk mencapai pemintasan data dan rampasan. , dsb. Walau bagaimanapun, dalam aplikasi praktikal, kerana projek aplikasi besar selalunya mempunyai banyak komponen, pengurusan keadaan global menjadi lebih penting. Pada masa ini, Vuex ialah penyelesaian yang sangat baik.

1. Pengenalan kepada Vuex

Vuex ialah perpustakaan pengurusan negeri rasmi Vue.js, yang direka untuk menyelesaikan masalah perkongsian keadaan (data) antara berbilang komponen dalam aplikasi Vue. Konsep terasnya termasuk:

• Nyatakan: data yang perlu diurus secara global dalam aplikasi.
• Getter (pengambil nilai): digunakan untuk memperoleh beberapa keadaan daripada keadaan (serupa dengan sifat yang dikira dalam komponen).
• Mutasi (mutasi): digunakan untuk mengubah suai data dalam keadaan Memandangkan data Vuex dikemas kini secara serentak dalam mutasi, ketekalan data boleh dijamin.
• Tindakan: Sama seperti mutasi, ia juga digunakan untuk mengubah suai data dalam keadaan, tetapi ia boleh beroperasi secara tak segerak dan boleh digunakan untuk memulakan operasi tak segerak seperti permintaan rangkaian.

Melalui penggunaan fleksibel konsep teras ini, Vuex boleh membantu kami mengurus data global, dengan itu memudahkan pemindahan dan operasi antara komponen.

2. Cipta Kedai Vuex

Data dalam Vuex disimpan dalam objek kedai, jadi kita perlu mencipta objek kedai terlebih dahulu. Dalam Vue 3, cara untuk mencipta objek kedai sedikit berbeza daripada Vue 2.

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

Dalam kod di atas, kami mencipta objek kedai melalui kaedah createStore dan menghantar objek tersebut mengandungi empat atribut: keadaan, mutasi, tindakan dan pengambil. Antaranya, atribut keadaan mentakrifkan nilai awal kiraan keadaan global sebagai 0 atribut mutasi mentakrifkan kenaikan kaedah mutasi, yang melaksanakan fungsi meningkatkan nilai kiraan dengan 1 atribut tindakan mentakrifkan kaedah tindakan incrementAsync, yang melaksanakan kenaikan tak segerak bagi nilai kiraan Fungsi 1 atribut getters mentakrifkan kaedah getter doubleCount, yang mengembalikan dua kali nilai kiraan.

3. Gunakan Vuex dalam komponen

Selepas mencipta objek kedai, kami boleh menggunakan data dan kaedahnya secara langsung dalam komponen. Dalam Vue 3, anda boleh menggunakan sintaks 5101c0cdbdc49998c642c71f6b6410a8 untuk menggunakan data dan kaedah dalam Vuex.

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

Dalam kod di atas, kami memperoleh objek kedai melalui fungsi useStore, dan memanggil kaedah kenaikan dalam kaedah handleClick untuk mengubah suai nilai kiraan. Dalam templat, kita boleh mendapatkan nilai kiraan melalui store.state.count dan mendapatkan dua kali ganda nilai kiraan melalui store.getters.doubleCount.

4. Ringkasan

Melalui pengenalan artikel ini, kita boleh memahami konsep asas dan penggunaan Vuex. Dalam pembangunan sebenar, jika aplikasi perlu menguruskan sejumlah besar data global, maka menggunakan Vuex adalah pilihan yang baik, yang boleh memudahkan interaksi antara komponen dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan Pengurusan Negeri Vuex untuk Melaksanakan Pengurusan Data Global. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!