vue+typescript 學習筆記

vue + typescript

最近在學習typescript,並結合vue練習一個demo.在這個demo將涉及如下知識點

1. vue-class-component
2. vuex-class

參考文章

1. https://github.com/vuejs/vue-class-component
2. https://github.com/Armour/vue-typescript-admin-template
3. https://championswimmer.in/vuex-module-decorators/

建立一個vue項目

1.安裝vue-cli

yarn global add @vue/cli

vue --version
// @vue/cli 4.1.1

2.建立vue項目

// 使用ui界面建立新項目, 固然也能夠使用命令的方式
vue ui

這裏要勾選typescript

等待安裝.

安裝支持vuexclass模式的vuex-module-decorators

yarn add vuex-module-decorators

添加counter邏輯代碼

cd vue-typescript/src/views
touch Counter.vue

添加如下內容(代碼沒法格式化,圖片代替)
/src/views/Counter.vue

修改/src/store/index.ts

添加一個vuex-module
/src/store/counter.ts

1. 首先是/src/store/index.ts. 會看到,這個導出的store中沒有module. 這是由於module會在建立時動態導入.而後是添加了一個VuexModuleWithUpdater, 這個類的用處是給全部的module定義一個公共方法$updateState, 而這個方法能夠接受一個對象來更新module中的state, 其本質是一個mutation.
2. /src/stroe/couter.ts中, 定義了state和module的接口,這些接口將會在vue組件中使用到.
3. 而後注意幾個地方. @Module({ name: 'counter', dynamic: true, store })中的dynamic表示這個module將動態導入. store則是導入的目標根據store. 在導出這個module時, 須要使用getModule.

4. 最後來看頁面組件(/src/views/Counter.vue).

   import  CounterModule, { ICounter } from  '@/store/modules/counter'
   class {
       get  counterIns():  ICounter {
           return  CounterModule
       }
   }

   先導入關聯的module, 而後經過computed屬性將module的實例掛載到當前的vue組件中.這個counterIns實例將包含全部的屬性和方法(這與之前的vue注入state和actions的方式有所不一樣).

最後

在本demo主要涉及vue-property-decorator和vuex-module-decorators這兩個庫,能夠讓vue和vuex使用基於類的方式來編寫. 日後將繼續深刻學習.