Apakah pengurusan negeri Vuex dalam Vue dan cara menggunakannya?

Apakah pengurusan negeri Vuex dalam Vue dan cara menggunakannya?

Vue ialah rangka kerja bahagian hadapan yang popular. Kemudahan penggunaannya dan fungsi yang berkuasa menjadikannya digunakan secara meluas dalam projek. Apabila projek bahagian hadapan menjadi lebih besar dan lebih kompleks, pengurusan data menjadi semakin sukar untuk dikekalkan Pada masa ini, pengurusan status menjadi sangat penting. Sebagai alat pengurusan keadaan Vue, Vuex boleh membantu kami mengatur dan mengurus keadaan aplikasi dengan lebih baik serta meningkatkan kebolehselenggaraan kod. Artikel ini akan memperkenalkan konsep asas dan penggunaan pengurusan negeri Vuex, dan membantu pembaca memahami peranan dan aplikasi praktikal pengurusan negeri Vuex.

1. Konsep asas pengurusan keadaan Vuex

1. Negeri

Storan negeri ialah bahagian teras Vuex dan digunakan untuk menyimpan maklumat yang dikongsi antara komponen negeri. Struktur data Negeri boleh menjadi tatasusunan, objek, dll., tidak seperti data komponen, data Negeri adalah global. Data dalam Negeri akan diuruskan oleh objek Simpan dan boleh diakses dan dikendalikan dengan mudah dalam projek.

2. Getter

Getter boleh dianggap sebagai sifat terkira State Dalam komponen, anda boleh mengakses pembolehubah dalam objek State melalui getter mentakrifkan beberapa pengiraan yang boleh digunakan semula Fungsi ini digunakan untuk mendapatkan data dalam Negeri, yang bersamaan dengan sifat yang dikira dalam Vue. Menggunakan Getters dalam pengurusan negeri boleh merangkum beberapa logik pengiraan yang kompleks dan memudahkan perkongsian dan penggunaan semula antara berbilang komponen.

3. Mutasi

Mutasi mentakrifkan beberapa fungsi untuk mengemas kini Keadaan dan mengubah suai data dalam Keadaan Ia hanya boleh melakukan operasi segerak. Memandangkan pengubahsuaian kepada Negeri mesti melalui Mutasi, ini memastikan bahawa pengubahsuaian kepada data boleh dikesan dan Negeri boleh dikemas kini dalam masa nyata. Penggunaan Mutasi juga sangat mudah. ​​Hanya panggil kaedah $store.commit dalam komponen dan masukkan nama Mutasi yang sepadan.

4. Tindakan

Tindakan ialah operasi tak segerak yang mengendalikan logik perniagaan Ia boleh termasuk sebarang operasi tak segerak, seperti permintaan HTTP, setTimeout atau operasi tak segerak yang lain. Apabila operasi tak segerak diperlukan, Tindakan akan diserahkan kepada Mutasi dan Mutasi akan melakukan operasi segerak untuk mengemas kini Negeri. Perbezaan antara Tindakan dan Mutasi ialah Tindakan boleh mengandungi operasi tak segerak. Tindakan juga boleh memanggil Tindakan dan Mutasi lain.

5. Modul

Modul membolehkan kami membahagikan Kedai kepada modul, dan setiap modul boleh mempunyai kaedah State, Mutasi, Tindakan dan Getter sendiri. Ini boleh menjadikan Gedung lebih teratur, meningkatkan kebolehbacaan kod dan memudahkan kerjasama pasukan. Mekanisme modulariti Vuex adalah serupa dengan modulariti ES6 Dengan menggunakan modulariti, anda boleh melanjutkan dan mengubah suai Kedai dengan mudah.

2. Cara menggunakan pengurusan keadaan Vuex

1. Memasang dan merujuk Vuex

Anda perlu memasang dan merujuk Vuex sebelum menggunakan Vuex.

Kaedah pemasangan:

npm install vuex --save

Kaedah rujukan:

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

2. Buat Kedai

Apabila menggunakan pengurusan negeri Vuex, kami mula-mula Anda perlukan untuk mencipta objek Kedai, yang sepatutnya menjadi cangkerang yang mengandungi keadaan keseluruhan aplikasi. Mencipta objek Store juga sangat mudah Anda hanya perlu menggabungkan State, Mutation, Action, Getter dan modul lain bersama-sama.

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

Vue.use(Vuex)

// 定义应用的初始状态
const state = {
  count: 0
}

// 定义 Mutation，处理 State
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

// 定义 Action，处理异步操作
const actions = {
  incrementAction ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 定义 Getter，获取 State 中的数据
const getters = {
  getCount: state => state.count
}

// 创建 Store 对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

3. Gunakan Simpan dalam komponen

Selepas Kedai dibuat, ia boleh digunakan dalam komponen. Kaedah menggunakan Store dalam komponen ialah memanggilnya melalui ini.$store.xxx, di mana xxx boleh menjadi State, Mutation, Action atau Getter.

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

4. Gunakan Modul dalam komponen

Apabila aplikasi menjadi lebih besar dan lebih besar, menggunakan State, Mutation, Action dan Getter menjadi sedikit kemas. Untuk menyusun kod dengan lebih baik, kita boleh menggabungkannya ke dalam Modul.

const appModule = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  actions: {
    incrementAction ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
}

export default new Vuex.Store({
  modules: {
    appModule: appModule
  }
})

Kemudian anda boleh menggunakannya seperti ini dalam komponen:

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters['appModule/getCount']
    }
  },
  methods: {
    increment () {
      this.$store.commit('appModule/increment')
    },
    decrement () {
      this.$store.commit('appModule/decrement')
    }
  }
}
</script>

Di atas adalah pengenalan pengurusan negeri Vuex dalam artikel ini, saya harap ia akan membantu pembaca. Dalam aplikasi praktikal, kepentingan pengurusan negeri tidak boleh diabaikan Penggunaan Vuex yang betul boleh menjadikan pembangunan lebih cekap dan lancar.

Atas ialah kandungan terperinci Apakah pengurusan negeri Vuex dalam Vue dan cara menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!