vue 高级进阶系列——用 typescript 玩转 vue 和 vuex

关注

发布于: 2020 年 12 月 05 日

用过 vue 的朋友大概对 vuex 也不陌生，vuex 的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对 vue 的状态进行统一管理，如下图介绍了其管理模式：

最简单的使用方法长这样的：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  }})复制代码

复制代码

如果项目中需要管理的状态很多，也可以将这些方法按文件分开，最后挂载在 index 文件下：

// state.jsexport default {    total: 0}复制代码

复制代码

// mutaction.jsexport default {    add(state){      state++  }}复制代码

复制代码

// action.jsexport default {    addAsync(context){     setTimeout(() => {            context.commit('add');     }, 1000);  }}复制代码

复制代码

最后统一导入到 index.js

// index.jsimport 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 组件就写好啦，如有不懂的地方或者文章没有考虑到的地方，欢迎随时指出。如果想了解更多前端知识，交流前端经验，欢迎微信搜索 趣谈前端 学习更多前端知识。

发布于: 2020 年 12 月 05 日阅读数: 57

原文链接:【http://xie.infoq.cn/article/7c7a8501b4fb06ae251ac3a97】。

徐小夕

关注

前端架构师，致力于前端工程化，可视化 2020.08.08 加入

公众号《趣谈前端》.喜欢coding, 开源, 擅长领域react, vue, nodejs, 小程序, 小游戏, 热爱旅游, 健身, 微信Mr_xuxiaoxi

发布

暂无评论

创作场景

vue 高级进阶系列——用 typescript 玩转 vue 和 vuex

徐小夕

评论