Penjelasan terperinci tentang penggunaan pengurus negeri Vuex 4 dalam Vue 3 untuk mencapai perkongsian data global

Vue 3 ialah rangka kerja JavaScript popular yang biasa digunakan untuk membina antara muka pengguna. Ia boleh digabungkan dengan mudah dengan pengurus negeri Vuex untuk perkongsian data global. Artikel ini akan menyelidiki penggunaan Vuex 4, versi baharu dalam Vue 3, untuk membantu pembangun lebih memahami dan menggunakan alat pengurusan negeri yang berkuasa ini.

Pertama, kita perlu memasang Vuex 4. Dalam projek Vue 3, anda boleh menggunakan perintah npm atau yarn untuk memasang versi terkini Vuex.

npm install vuex@next

or

yarn add vuex@next

Selepas pemasangan selesai, import modul Vuex dalam fail kemasukan Vue 3 dan gunakan fungsi createApp untuk mencipta contoh aplikasi Vue . createApp函数创建Vue应用程序实例。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

在上述代码中，我们使用createStore函数创建了一个Vuex的store实例，并将其作为插件使用，以便在整个应用程序中使用Vuex进行状态管理。

接下来，让我们了解Vuex 4中最重要的两个概念：状态（state）和操作（mutation）。

状态是应用程序中的数据源，可以在任何组件中访问。操作是用于修改状态的方法，它们通过同步的方式来改变状态。在Vuex 4中，状态和操作都是使用纯函数的方式来定义的。

例如，我们可以在Vuex中定义一个counter状态和一个increment操作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

在上述代码中，我们定义了一个初始状态counter为0，并且定义了一个名为increment的操作，它可以通过state.counter++来增加计数器的值。

在组件中使用Vuex的状态和操作非常简单。可以通过$store对象来访问状态和操作。

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

在上述代码中，我们通过commit方法来触发increment操作，并使用state方法来获取counter状态的当前值。

除了状态和操作，Vuex 4还引入了新的特性：动作（action）和getter。

动作是通过异步方式来操作状态的函数。在Vuex 4中，可以通过actions属性来定义动作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上述代码中，我们定义了一个名为asyncIncrement的动作，它通过setTimeout函数来模拟异步操作，并在1秒后触发increment操作。

Getter是用于获取状态的计算属性。在Vuex 4中，可以通过getters属性来定义getter。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  }
})

在上述代码中，我们定义了一个名为doubleCounter的getter，它返回counter状态的两倍。

在组件中使用动作和getter与使用操作和状态类似。可以通过$store.dispatch方法来触发动作，并通过$store.getters属性来获取getter的值。

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    },
    doubleCounter() {
      return this.$store.getters.doubleCounter
    }
  }
}

在上述代码中，我们通过this.$store.dispatch方法来触发asyncIncrement动作，并通过this.$store.getters.doubleCounter来获取doubleCounterrrreee

Dalam kod di atas, kami menggunakan fungsi createStore untuk mencipta contoh kedai Vuex dan menggunakannya sebagai pemalam untuk menggunakan Vuex untuk keadaan di seluruh pengurusan aplikasi.

Seterusnya, mari kita fahami dua konsep terpenting dalam Vuex 4: keadaan dan mutasi. #🎜🎜##🎜🎜#State ialah sumber data dalam aplikasi dan boleh diakses dalam mana-mana komponen. Operasi adalah kaedah yang digunakan untuk mengubah keadaan mereka menukar keadaan secara segerak. Dalam Vuex 4, keadaan dan operasi ditakrifkan menggunakan fungsi tulen. #🎜🎜##🎜🎜#Sebagai contoh, kita boleh mentakrifkan keadaan counter dan operasi increment dalam Vuex. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mentakrifkan keadaan awal counter sebagai 0 dan mentakrifkan operasi bernama increment, yang boleh Menaikkan nilai pembilang. melalui state.counter++. #🎜🎜##🎜🎜#Menggunakan keadaan dan operasi Vuex dalam komponen adalah sangat mudah. Keadaan dan operasi boleh diakses melalui objek $store. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mencetuskan operasi kenaikan melalui kaedah commit dan menggunakan kaedah state untuk mendapatkan Nilai semasa status counter. #🎜🎜##🎜🎜#Selain keadaan dan operasi, Vuex 4 juga memperkenalkan ciri baharu: tindakan dan pengambil. #🎜🎜##🎜🎜#Tindakan ialah fungsi yang beroperasi pada keadaan secara tidak segerak. Dalam Vuex 4, tindakan boleh ditakrifkan melalui atribut actions. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mentakrifkan tindakan bernama asyncIncrement, yang mensimulasikan operasi tak segerak melalui fungsi setTimeout dan dalam 1 Cetuskan kenaikan selepas beberapa saat. #🎜🎜##🎜🎜#Getter ialah harta pengiraan yang digunakan untuk mendapatkan negeri. Dalam Vuex 4, getter boleh ditakrifkan melalui atribut getters. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mentakrifkan pengambil bernama doubleCounter, yang mengembalikan dua kali ganda status counter. #🎜🎜##🎜🎜#Menggunakan tindakan dan getter dalam komponen adalah serupa dengan menggunakan operasi dan keadaan. Tindakan boleh dicetuskan melalui kaedah $store.dispatch dan nilai pengambil boleh diperoleh melalui harta $store.getters. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mencetuskan tindakan asyncIncrement melalui kaedah this.$store.dispatch dan lulus this .$ store.getters.doubleCounter untuk mendapatkan nilai doubleCounter. #🎜🎜##🎜🎜#Ringkasnya, Vuex 4 menyediakan cara yang mudah untuk mengurus perkongsian data global dalam aplikasi Vue 3. Dengan mentakrifkan keadaan, operasi, tindakan dan pengambil, kami boleh berkongsi dan mengurus data dengan mudah. Saya harap artikel ini akan membantu anda lebih memahami penggunaan dan prinsip Vuex 4. #🎜🎜#

Atas ialah kandungan terperinci Penjelasan terperinci tentang penggunaan pengurus negeri Vuex 4 dalam Vue 3 untuk mencapai perkongsian data global. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!