Bagaimana untuk menyimpan data menggunakan vuex dalam uniapp

Menggunakan vuex dalam uniapp boleh membantu kami menjadikan perkongsian data dan pengurusan antara komponen lebih mudah dan ringkas. Cara menyimpan data dalam vuex juga merupakan kemahiran penting yang perlu kita kuasai. Berikut akan memperkenalkan secara terperinci cara menggunakan vuex untuk menyimpan data dalam uniapp.

1. Tentukan keadaan dalam vuex

Dalam vuex, kita perlu terlebih dahulu menentukan kedai, iaitu pengurus keadaan global, termasuk keadaan, mutasi, tindakan, Getters dan lain-lain sifat dan kaedah. Dan keadaan adalah kunci kepada kami menyimpan data.

Dalam uniapp, kami boleh mencipta fail index.js dalam folder kedai di bawah direktori src dan menentukan keadaan di dalamnya. Contohnya:

const state = {
  username: ''
}

Di sini, kami mentakrifkan objek keadaan yang mengandungi atribut nama pengguna dan memulakannya kepada rentetan kosong. Nama pengguna ini ialah data yang ingin kami simpan dalam vuex.

2. Gunakan mutasi untuk mengubah suai keadaan

Seterusnya kita perlu mentakrifkan mutasi Dalam mutasi, kita boleh mentakrifkan operasi yang berbeza, seperti menambah data, mengubah suai data dan memadam data. Di sini, kami mengambil mengubah suai data sebagai contoh untuk menunjukkan cara menyimpan data untuk dinyatakan.

Dalam fail src/store/index.js, takrifkan kaedah mutasi seperti berikut:

const mutations = {
  setUsername (state, payload) {
    state.username = payload
  }
}

Di sini, kami mentakrifkan kaedah setUsername yang menerima dua parameter: keadaan dan muatan. Keadaan ialah objek keadaan yang kami takrifkan dalam langkah sebelumnya, dan muatan ialah data yang diubah suai.

Kaedah setUsername mencapai tujuan menyimpan data ke keadaan dengan mengubah suai atribut nama pengguna dalam objek keadaan.

3. Menggunakan vuex dalam komponen

Sekarang kita telah menentukan dan menyimpan data dalam vuex, kita perlu menggunakannya dalam komponen.

Dalam komponen yang perlu kita gunakan, kita perlu memperkenalkan vuex dan menggunakan kaedah seperti mapState untuk mendapatkan data dalam keadaan supaya ia boleh digunakan dalam komponen.

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  mounted () {
    console.log(this.username) // 打印出保存在vuex中的数据
  }
}

Di sini, kami menggunakan kaedah mapState untuk memetakan data dalam vuex kepada harta yang dikira dalam komponen dan memberikannya alias sebagai nama pengguna, supaya kami boleh menggunakan this.username dalam komponen untuk mendapatkan data disimpan dalam data vuex.

4. Ubah suai data dalam vuex dalam komponen

Dalam langkah sebelumnya, kami telah dapat memperoleh data yang disimpan dalam vuex dalam komponen Langkah seterusnya ialah untuk memproses data Logik bagaimana untuk mengubah suai data dalam vuex dalam komponen.

Dalam komponen, kami boleh menyerahkan kaedah dalam mutasi dan mengubah suai data dalam keadaan melalui ini.$store.commit('mutation method name', data).

methods: {
  modifyUsername () {
    this.$store.commit('setUsername', 'newUsername')
  }
}

Di sini, kami mentakrifkan kaedah modifyUsername Apabila kami memanggilnya dalam komponen, kami boleh menyerahkan kaedah setUsername melalui kaedah ini.$store.commit dan memasukkan data baharu newUsername. Dengan cara ini, data yang disimpan dalam vuex boleh diubah suai.

5. Ringkasan

Melalui langkah di atas, kita boleh belajar menggunakan vuex untuk menyimpan dan mengurus data dalam uniapp Langkahnya mudah dan tidak sukar dalam amalan. Apabila menulis aplikasi yang besar atau kompleks, menggunakan vuex boleh meningkatkan kebolehselenggaraan dan kebolehbacaan kod dengan lebih baik, dan juga mempercepatkan proses pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk menyimpan data menggunakan vuex dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!