VuexTS入門指南

一、VuexTS概述

Vuex是一個為Vue.js應用程序提供狀態管理的庫。它可以將所有組件的狀態存儲在一個地方，易於集中處理和調試。VuexTS是對Vuex的TypeScript封裝，提供了TypeScript的強類型和良好的提示。在這一章節中，我們將詳細講解VuexTS的基本概念和使用方法。

二、VuexTS核心概念

1. State

在VuexTS中，State表示組件的狀態。它類似於組件中的data對象，但是它是全局的。State需要通過getters、mutations和actions來進行訪問和修改。

// 示例代碼
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;

  get getCount() {
    return this.count;
  }

  @Mutation
  increment() {
    this.count++;
  }

  @Mutation
  decrement() {
    this.count--;
  }

  @Action
  async fetchCount() {
    const result = await Promise.resolve(10);
    this.context.commit('setCount', result);
  }

  @Mutation
  setCount(count: number) {
    this.count = count;
  }
}

2. Getter

Getter用於從State中派生出一些狀態或計算屬性。它類似於組件中的computed屬性。

// 示例代碼
import { Module, VuexModule, Getter } from 'vuex-module-decorators';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;

  get doubleCount() {
    return this.count * 2;
  }

  @Getter
  tripleCount() {
    return this.count * 3;
  }
}

3. Mutation

Mutation用於修改State的值。它類似於組件中的methods方法，但是它必須是同步的。

// 示例代碼
import { Module, VuexModule, Mutation } from 'vuex-module-decorators';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;

  @Mutation
  increment() {
    this.count++;
  }

  @Mutation
  decrement() {
    this.count--;
  }

  @Mutation
  setCount(count: number) {
    this.count = count;
  }
}

4. Action

Action用於非同步修改State的值，可以包含任意非同步操作。

// 示例代碼
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;

  @Action
  async fetchCount() {
    const result = await Promise.resolve(10);
    this.context.commit('setCount', result);
  }

  @Mutation
  setCount(count: number) {
    this.count = count;
  }
}

三、VuexTS進階使用

1. Module

我們可以使用Module來將一個複雜的Store拆分成多個模塊，每個模塊擁有自己的State、Getter、Mutation和Action。這樣可以讓我們的代碼更加清晰和易於管理。

// 示例代碼
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
import SubModule from './subModule';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;
  subModule = new SubModule();

  @Mutation
  increment() {
    this.count++;
  }

  @Mutation
  decrement() {
    this.count--;
  }

  @Mutation
  setCount(count: number) {
    this.count = count;
  }

  @Action
  async fetchCount() {
    const result = await Promise.resolve(10);
    this.context.commit('setCount', result);
  }
}

2. Plugin

我們可以使用Plugin來在Store中增加額外的邏輯，比如列印日誌、持久化、非同步請求等。Plugin應該返回一個函數，接收Store作為參數，並且可以訂閱mutation。

// 示例代碼
import { Module, VuexModule, Mutation, Action, Plugin } from 'vuex-module-decorators';

@Module({
  namespaced: true,
  name: 'example'
})
export default class Example extends VuexModule {
  count = 0;

  @Mutation
  increment() {
    this.count++;
  }

  @Mutation
  decrement() {
    this.count--;
  }

  @Mutation
  setCount(count: number) {
    this.count = count;
  }

  @Action
  async fetchCount() {
    const result = await Promise.resolve(10);
    this.context.commit('setCount', result);
  }
}

const examplePlugin: Plugin = (store) => {
  store.subscribe((mutation, state) => {
    console.log(`mutation ${mutation.type} in module ${state._moduleName}`);
  });
};

export { examplePlugin };

3. Helper

VueTS提供了一些輔助函數來簡化代碼。比如mapState、mapGetters、mapMutations和mapActions。我們可以使用它們來將Store映射到組件的computed屬性、methods方法和Vuex的輔助函數中。

// 示例代碼
import { Component, Vue } from 'vue-property-decorator';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

@Component({
  computed: {
    ...mapState('example', ['count']),
    ...mapGetters('example', ['doubleCount']),
    // ...
  },
  methods: {
    ...mapMutations('example', ['increment', 'setCount']),
    ...mapActions('example', ['fetchCount']),
    // ...
  }
})
export default class ExampleComponent extends Vue {
  // ...
}

四、總結

在本文中，我們詳細介紹了VuexTS的基本概念和使用方法。通過VuexTS，我們可以更加方便地管理和維護狀態。我們還介紹了Module、Plugin和Helper等進階使用方法，希望對讀者有所幫助。