vue高級進階系列——用typescript玩轉vue和vuex

       用過vue的朋友大概對vuex也不陌生，vuex的官方解釋是專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。說的簡單點就是對vue的狀態進行統一管理，以下圖介紹了其管理模式：

最簡單的使用方法長這樣的：

// 若是在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
複製代碼

若是項目中須要管理的狀態不少，也能夠將這些方法按文件分開，最後掛載在index文件下：

// state.js
export default {
    total: 0
}
複製代碼

// mutaction.js
export default {
    add(state){
      state++
  }
}
複製代碼

// action.js
export default {
    addAsync(context){
     setTimeout(() => {
            context.commit('add');
     }, 1000);
  }
}
複製代碼

最後統一導入到index.js

// index.js
import Vue from 'vue';
import Vuex from 'vuex';
import { state } from './state';
import mutations from './mutation';
import actions from './action';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
});
複製代碼

完畢，這就是基本的vuex的開發模式。接下來，我不會過多介紹vuex的用法，而是介紹如何基於typescript，用class的方式來使用vue和vuex進行項目開發，相信使用過react的朋友們對class的寫法不會陌生，那就讓咱們開始吧！

       爲了省去一些配置上的麻煩，咱們直接採用vue-cli3來搭建項目。在建立項目的時候選中typescript便可。

建立完項目以後，咱們對項目結構進行調整，使其更易於維護和管理，以下：

接下來開始咱們的代碼編寫，首先關注store目錄，這是咱們管理項目狀態的地方，咱們將state改寫成typescript的方式：

export interface State {
    name: string;
    total: number;
    isLogin: boolean;
    postList: object[];
}

export const state: State = {
    name: '',
    total: 0,
    isLogin: false,
    postList: [],
};
複製代碼

若是對typescript不熟悉的同窗，能夠移步到typescript官網去了解基本用法。

action文件和以前沒有太大變化，只是增長了類型定義和參數：

export default {
    asyncAdd(context: any, paylod: any) {
        setTimeout(() => {
            context.commit('add', paylod.num);
        }, 1000);
    },
};
複製代碼

下面是mutaction文件：

import { State } from './state';

export default {
    add(state: State, payload: any) {
        payload ? (state.total += payload) : state.total++;
    },
};
複製代碼

說到這裏，有必要簡單講解一下action和mutaction的區別： Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。 說簡單點就是mutation用於同步執行，action用於異步執行，能夠多重分發mutation。

       完成了這些，vuex的工做大體告於段落，接下來咱們關注的重點就是頁面組件和如何在組件中使用vuex。

// home.vue
<template>
  <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld :msg="name" /> <div @click="onclick">{{name}}</div> <div @click="add">同步增長總數：{{total}}</div> <div @click="addAsync(1)">異步增長總數：{{total}}</div> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import { mapMutations } from 'vuex'; import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src @Component({ components: { HelloWorld, }, }) export default class Home extends Vue { public name: string = 'xujiang'; public onclick(): void { this.name = 'hello world'; } public add() { this.$store.commit('add'); } public addAsync(num: any) { this.$store.dispatch('asyncAdd', {num}); } get total(): void { return this.$store.state.total; } } </script> 複製代碼

相信用過react的朋友對這種寫法並不陌生，其實vue徹底能夠將模版寫法改寫成jsx的方式，就比如寫react的jsx文件同樣，後面我會推出一篇文章，專門介紹如何使用jsx+class的方式開發vue組件。 vue-cli3已經爲咱們安裝了是支持class和裝飾器的模塊vue-property-decorator，固然想本身配置的朋友也能夠經過webpack本身配置，無限可能，我也會在後面推出關於webpack的文章，教你們如何玩轉webpack4.0。

使用class方式建立組件和傳統的方式有點區別：1.通常咱們定義data做爲數據源，在class中咱們能夠直接定義屬性，便可做爲初始數據；2.vue實例方法通常定義在methods中，用類組件時，能夠直接使用組件方法。 最後，咱們能夠用vuex提供的commit和dispatch來觸發咱們狀態的變化，至此，一個class版的vue組件就寫好啦，若有不懂的地方或者文章沒有考慮到的地方，歡迎隨時指出。若是想了解更多前端知識，交流前端經驗，歡迎加入咱們的學習交流羣。

接下來即將推出的文章： 1.玩轉webpack4.0 2.typescript實用知梳理 3.react+redux+redux+trunk+immutable實戰總結