Mari terokai sama ada Uniapp mempunyai Vuex terbina dalam

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan rangka kerja Vue. Vuex, sebagai perpustakaan pengurusan negeri dalam Vue, boleh membantu aplikasi Vue berkongsi dan mengurus keadaan antara berbilang komponen. Jadi, adakah Uniapp mempunyai Vuex terbina dalam? Mari kita terokai bersama-sama.

Uniapp mempunyai Vuex

Jawapannya ya. Uniapp mempunyai Vuex terbina dalam, membenarkan pembangun menggunakan Vuex dalam Uniapp untuk membantu mengurus status aplikasi Ini juga merupakan salah satu fungsi Uniapp yang lebih lengkap.

Mengapa Vuex diperlukan

Dalam beberapa aplikasi yang lebih kompleks, mungkin terdapat berbilang komponen yang perlu berkongsi keadaan yang sama. Jika tiada alat pengurusan untuk membantu kami mengurus perkongsian negeri dan perubahan keadaan, maka pemprosesan perubahan keadaan ini akan menjadi sangat menyusahkan.

Kemunculan Vuex adalah untuk membantu kami menguruskan keadaan dengan lebih cekap. Vuex mengekalkan pepohon keadaan global, yang membolehkan pembangun berkongsi keadaan antara komponen yang berbeza, dan boleh mengawal pengubahsuaian keadaan melalui peraturan tertentu untuk memastikan ketekalan dan kebolehkawalan keadaan.

Konsep teras Vuex

Apabila menggunakan Vuex, kita perlu memahami beberapa konsep teras terlebih dahulu:

1. State: state ialah objek penyimpanan data global keadaan permohonan.
2. Getter: Getter digunakan untuk mendapatkan data dalam keadaan, serupa dengan sifat yang dikira.
3. Mutasi: mutasi digunakan untuk mengubah suai data dalam keadaan dan hanya boleh dilaksanakan secara serentak.
4. Tindakan: tindakan digunakan untuk mengubah suai data dalam keadaan tidak segerak dan boleh digunakan untuk mengendalikan operasi tak segerak.
5. Modul: modul digunakan untuk memisahkan Vuex kepada berbilang modul, setiap modul mempunyai keadaan, pengambil, mutasi dan tindakan sendiri.

Cara menggunakan Vuex dalam Uniapp

Apabila membangunkan projek menggunakan Uniapp, kita boleh memilih sama ada untuk menggunakan Vuex apabila projek itu dibuat. Jika tiada pilihan, anda perlu mengkonfigurasinya secara manual.

Mula-mula, buat folder kedai di bawah folder src dan buat fail index.js di bawah folder.

Dalam fail ini, kita perlu merujuk Vuex terlebih dahulu:

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

Vue.use(Vuex)

Kemudian, kita perlu mentakrifkan contoh Vuex.Store:

export default new Vuex.Store({
  state: { // 状态
    userInfo: {}
  },
  mutations: { // 修改状态
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: { // 异步修改状态
    fetchUserInfo({ commit }) {
       // 异步请求数据，根据返回值进行状态修改
       let userInfo = {...}
       commit('setUserInfo', userInfo)    
    }
  },
  getters: { // 获取状态
    userInfo(state) {
      return state.userInfo;
    }
  }
})

Akhir sekali, dalam utama Perkenalkan kedai ke dalam .js dan masukkan kedai ke dalam contoh Vue:

import store from './store'
import App from './App'

Vue.prototype.$store = store;

const app = new Vue({
    ...App,
    store
})
app.$mount()

Dengan cara ini, dalam semua komponen, kita boleh menggunakan $store untuk mengakses keadaan dalam Vuex. Sebagai contoh, jika kita ingin mendapatkan userInfo dalam komponen, kita boleh menulis seperti ini:

export default {
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  }
}

Begitu juga, jika kita ingin mengubah suai userInfo, kita boleh menulis seperti ini:

this.$store.commit('setUserInfo', userInfo)

Jika Ia adalah pengubahsuaian tak segerak Kita boleh menulisnya seperti ini:

this.$store.dispatch('fetchUserInfo')

Ringkasan

Uniapp mempunyai Vuex terbina dalam, membolehkan pembangun mengurus keadaan dengan lebih cekap.

Apabila menggunakan Vuex, kita perlu memahami konsep terasnya: State, Getter, Mutation, Action dan Module.

Untuk menggunakan Vuex dalam Uniapp, anda perlu membuat fail index.js dalam folder kedai, tentukan contoh Vuex.Store dan memperkenalkan kedai dalam main.js.

Akhir sekali, dalam komponen, kita boleh mengakses dan mengubah suai keadaan dalam Vuex melalui $store.

Atas ialah kandungan terperinci Mari terokai sama ada Uniapp mempunyai Vuex terbina dalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!