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实战总结