Bagaimana untuk menyimpan data menggunakan Vuex dalam aplikasi Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan pembangun cara moden untuk membina aplikasi web. Vuex ialah model pengurusan keadaan Vue yang membolehkan anda mengurus, berkongsi dan menyegerakkan keadaan dengan mudah dalam aplikasi anda. Dalam artikel ini, kami akan memberi tumpuan kepada cara menyimpan data menggunakan Vuex dalam aplikasi Vue.

1. Apakah itu Vuex?

Vuex ialah perpustakaan pengurusan keadaan sumber terbuka yang boleh digunakan dengan Vue.js. Ia membolehkan anda berkongsi keadaan antara komponen aplikasi anda yang berbeza dan memastikan ia disegerakkan sepanjang aplikasi anda. Idea teras Vuex ialah "pokok keadaan tunggal", yang menyimpan semua keadaan aplikasi (seperti data dalam komponen) dalam "stor". Ini menjadikan pengurusan negeri lebih mudah dijangka dan lebih mudah untuk diselenggara.

2. Memasang dan menyediakan Vuex dalam aplikasi Vue anda

Sebelum menggunakan Vuex, anda perlu memasangnya dalam aplikasi Vue anda. Vuex boleh dimuat turun dan dipasang melalui pengurus pakej NPM.

Dalam projek anda, anda perlu mengimport Vuex sebelum tika Vue:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

Seterusnya, anda perlu menambah tika kedai Vuex baharu. Contoh kedai Vuex ialah objek yang mengandungi semua keadaan dan logik dalam aplikasi anda.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Dalam contoh ini, tika kedai akan mempunyai sifat keadaan yang dipanggil "kira" dan kaedah ubah yang dipanggil "kenaikan". Kaedah perubahan ini akan meningkatkan nilai kiraan. Kita boleh menggunakannya dalam komponen dengan cara berikut:

this.$store.commit('increment')

3. Cara menyimpan data ke Vuex

Menyimpan data ke Vuex dalam aplikasi Vue tidaklah rumit. Untuk menyimpan data, anda perlu menentukan kaedah mutasi pada contoh kedai. Kaedah ini boleh dipanggil dari mana-mana komponen untuk menukar keadaan.

Mari kita lihat contoh. Katakan kita mempunyai tatasusunan yang dipanggil "todos" dalam aplikasi kami dan kami mahu menyimpannya dalam sifat keadaan yang dipanggil "todos".

const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo (state, todo) {
      state.todos.push(todo)
    }
  }
})

Dalam contoh ini, kami mentakrifkan kaedah mutasi yang dipanggil addTodo. Kaedah ini akan dipanggil dalam komponen untuk menambah todo baharu pada tatasusunan state.todos. Komponen boleh memanggilnya dengan cara berikut:

this.$store.commit('addTodo', todo)

Nota: Parameter "addTodo" ialah objek todo.

4. Ringkasan

Seperti yang dinyatakan di atas, Vuex ialah perpustakaan pengurusan negeri yang berkuasa untuk Vue.js. Dengan menggunakan Vuex dalam aplikasi anda, anda boleh mengurus keadaan dan logik dengan lebih baik. Untuk menyimpan data dalam Vuex, anda perlu menentukan kaedah mutasi dalam contoh kedai. Dalam komponen anda boleh menggunakannya dengan memanggil ini.$store.commit. Semoga artikel ini bermanfaat kepada anda.

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