Vue.js untuk Pemula VueJs Bahagian Pengurusan Negeri dengan Vuex

Menguruskan keadaan dalam aplikasi Vue.js boleh menjadi rumit apabila apl itu berkembang. Dalam siaran ini, kami akan meneroka cara mengurus keadaan dengan berkesan menggunakan Vuex, pustaka pengurusan negeri rasmi untuk Vue.js.

- Apakah Vuex?
Vuex ialah perpustakaan corak pengurusan negeri untuk aplikasi Vue.js. Ia berfungsi sebagai stor berpusat untuk semua komponen dalam aplikasi, menjadikannya lebih mudah untuk berkongsi data antara mereka. Ini membantu dalam mengurus negeri dengan cara yang boleh diramalkan.

- Memasang Vuex
Untuk bermula dengan Vuex, anda perlu memasangnya terlebih dahulu. Jika anda menggunakan Vue CLI, anda boleh memilih untuk memasangnya semasa membuat projek anda. Jika anda sudah mempunyai projek, pasangkannya melalui npm:

npm install vuex@next --save

Menyediakan Vuex

- Buat Kedai
Cipta folder baharu bernama stor dalam srcdirectory anda, dan dalam folder itu, buat fail bernama index.js. Fail ini akan memegang konfigurasi kedai Vuex. Dalam contoh ini, kami akan membuat kedai mudah untuk menambah dan menolak nilai kiraan.

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

- Integrasikan Kedai Vuex ke dalam Aplikasi Anda
Seterusnya, integrasikan kedai Vuex ke dalam contoh Vue utama anda. Edit fail utama.js anda:

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

Menggunakan Vuex dalam Komponen

Sekarang Vuex telah disediakan, mari lihat cara menggunakannya dalam komponen anda. Berikut ialah contoh cara untuk mengakses dan mengubah suai keadaan daripada komponen.

- Mengakses Negeri
Anda boleh mengakses negeri menggunakan ini.$store.state:

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

Kesimpulan

Dalam siaran ini, kami telah membincangkan asas pengurusan negeri dalam Vue.js menggunakan Vuex. Dengan Vuex, pengurusan keadaan dalam aplikasi anda menjadi lebih tersusun dan boleh diramal. Dalam bahagian seterusnya siri kami, kami akan meneroka topik yang lebih lanjutan seperti modul dan tindakan tak segerak dalam Vuex.

Saya harap anda mendapati siaran ini membantu! Jangan ragu untuk meninggalkan sebarang soalan atau komen di bawah ?.

Atas ialah kandungan terperinci Vue.js untuk Pemula VueJs Bahagian Pengurusan Negeri dengan Vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!