Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vuex untuk pengurusan negeri

Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vuex untuk pengurusan negeri

Pengenalan:
Dalam pembangunan Vue, pengurusan negeri ialah topik penting. Sebagai alat pengurusan negeri yang disyorkan secara rasmi oleh Vue, Vuex sangat biasa digunakan dalam projek. Artikel ini akan memperkenalkan cara menggunakan Vuex untuk pengurusan negeri dan membangun dengan Vue3, TypeScript dan Vite.

1. Pasang dependencies
Pertama, kita perlu memasang versi Vuex dan vuex@4 dalam projek untuk menyokong Vue3:

npm pasang vuex@next --save

2. Buat direktori kedai dalam src directory , dan cipta fail index.ts. Dalam fail index.ts, kita perlu mentakrifkan tika Vuex Store dan mengeksport tika itu untuk kegunaan global.

// store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  // 定义state
  state: {
    count: 0,
  },
  // 定义mutations
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义actions
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

export default store;

3. Cipta main.ts

Dalam fail main.ts dalam direktori src, kita perlu mengimport kedai Vuex dan menggunakan kedai dalam fungsi createApp.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4 Menggunakan Vuex

Kini, kami telah menyediakan konfigurasi asas Vuex. Seterusnya, kita boleh menggunakan Vuex dalam komponen.

Dalam App.vue, kami mencetuskan mutasi kenaikan dalam stor dengan menggunakan fungsi

tambahan. mapState辅助函数，来映射store中的count值到组件中，并通过使用mapMutations

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

Pada ketika ini, kami telah menyelesaikan penggunaan asas Vuex dalam projek Vue3+TS+Vite. Dengan menggunakan Vuex, kami boleh mengurus keadaan global aplikasi dengan mudah dan mencapai perkongsian dan komunikasi negeri, meningkatkan kecekapan pembangunan dan kebolehselenggaraan kod.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Vuex untuk pengurusan negeri dalam projek Vue3+TS+Vite. Dengan memasang kebergantungan, mencipta kejadian kedai dan menggunakan fungsi tambahan Vuex, kami boleh menggunakan Vuex dengan mudah dalam projek untuk mengurus dan berkongsi keadaan global.

Di atas adalah pengenalan kepada cara menggunakan Vuex untuk pengurusan negeri dalam kemahiran pembangunan Vue3+TS+Vite Saya harap ia akan membantu amalan pembangunan anda. Jika anda mempunyai sebarang soalan, sila berasa bebas untuk membincangkannya.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vuex untuk pengurusan negeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!