TypeScript + Vue系列(二): 引入vuex + vue-class

02-05

前言

在TypeScript + Vue系列(一): 新項目配置中, 我們已經初始化了一個TypeScript + Vue的模板. 但是對於一個大型的Vue項目來說, Vuex的使用是必不可少的. 所以這一節我們將來展示一下如何在Vue + TypeSciprt的項目中中引入Vuex. 如果想在Vuex中寫TypeScript, 需要藉助vuex-class.

下載依賴

在命令行下輸入以下內容

npm install vuex vuex-class --saven

添加`Couter.vue`

在src/components/下新增Couter.vue文件, 用於展示項目中引入了Vuex的效果

初始化Couter.vue單文件

<template> n <div class="counter">n <h1>Couter.vue</h1>n </div>n</template>n n<script>n import Vue from vuen import Component from vue-class-componentnn @Componentn export default class Counter extends Vue {nn } n</script>n

增添路由跳轉到Couter.vue
在src/router/index.ts中新增對Couter.vue組件的跳轉

import Vue from vuenimport Router from vue-routernimport HelloWorld from @/components/HelloWorld.vuenimport Counter from @/components/Counter.vuennVue.use(Router)nnexport default new Router({n routes: [n {n path: /,n name: HelloWorld,n component: HelloWorldn },n {n path: /counter,n name: Couter,n component: Countern }n ]n})n

因為裝飾器的緣故, 會出現以下的報錯信息

報錯信息

只需要按照指引npm install babel-plugin-transform-decorators-legacy --save-dev, 並在.babelrc中新增"plugins": ["transform-decorators-legacy"], 即可消除錯誤信息

查看Counter.vue是否添加成功

在url中輸入http://localhost:8080/#/counter, 可以看到Counter.vue添加成功

Counter.vue初始化成功

增加Vuex及相關文件

在src/下新建store文件夾, 並在store文件夾中新增index.ts, state.ts, mutations-types.ts, mutations.ts, actions.ts共5個文件. 文件內容如下所示

index.ts文件

import Vue from vuenimport Vuex from vuexnimport state from ./statenimport mutations from ./mutationsnimport actions from ./actionsnnVue.use(Vuex);nnexport default new Vuex.Store({n state,n mutations,n actionsn})n

state.ts文件

export default {n initNumber: 1n}n

mutations-types.ts文件

export const INCREMENT_NUMBER = INCREMENT_NUMBER;n

mutations.ts文件

import * as types from ./mutations-typesnimport { MutationTree } from vuexnnconst mutations: MutationTree<any> = {n [types.INCREMENT_NUMBER](state, data:number): void {n state.initNumber += data;n }n}nnexport default mutationsn

actions.ts文件

import * as types from ./mutations-typesnnexport default {n incrementNumberAsync({ commit }, data:number) {n setTimeout(() => {n let mutation = types.INCREMENT_NUMBER;n commit(mutation, data)n }, 1000)n }n}n

main.ts中引入store

import Vue from vuenimport App from ./App.vuenimport router from ./routernimport store from ./storennVue.config.productionTip = falsenn/* eslint-disable no-new */nnew Vue({n el: #app,n router,n store,n template: <App/>,n components: { App }n})n

修改`Couter.vue`單文件

<template>n <div class="counter">n <h1>Coute.vue</h1>n <h1>從Vuex中獲取的數字是: {{number}}</h1>n <button @click="incrementNumber(1)">點擊同步加1</button>n <button @click="incrementNumberAsync(1)">點擊非同步加1</button>n </div>n</template>nn<script lang="ts">n import Vue from vuen import Component from vue-class-componentn import { State, Action, Mutation} from vuex-classn import * as types from ../store/mutations-typesnn @Componentn export default class Counter extends Vue {n @State(initNumber) numbern @Mutation(types.INCREMENT_NUMBER) incrementNumbern @Action(incrementNumberAsync) incrementNumberAsyncn } n</script>n

參考鏈接

示例代碼

Github倉庫

TypeScript相關文檔

TypeScript入門教程
TypeScript官網

參考文章

Decorators in ES7: ES7中裝飾器
ES7 Decorator 裝飾者模式
vue + typescript 新項目起手式
vue + typescript 進階篇