如何使用 vue + typescript 編寫頁面 ( vuex裝飾器補充部分--store裝飾器 )

本章是對上一章 如何使用 vue + typescript 編寫頁面 ( vuex裝飾器部分 )的補充 ,感謝 @慕容寒江 的提出建議

在使用store裝飾器以前，先過一下傳統的store用法吧

export default  {
    namespaced:true,
    state:{
        foo:""
    },
    getters:{
        getFoo(state){ return state.foo}
    },
    mutations:{
        setFooSync(state,payload){
            state.foo = payload
        }
    },
    actions:{
        setFoo({commit},payload){
            commot("getFoo",payload)
        }
    }
}
複製代碼

而後開始使用vuex-module-decorators

import {
Module,
VuexModule, 
Mutation, 
Action, 
MutationAction, 
getModule } from 'vuex-module-decorators'
複製代碼

1. VuexModule 用於基本屬性

export default class TestModule extends VuexModule { }
複製代碼

VuexModule 提供了一些基本屬性，包括namespaced,state,getters,modules,mutations,actions,context 其中context則會在接下來的代碼中使用到

2. @Module 標記當前爲module

@Module
export default class TestModule extends VuexModule {
    /* 這裏表明的就是state裏面的狀態 */
    inlineState = "";
    /* 這裏就是 getters 裏面的內容*/
    get named(){
        return 1;
    }
}
複製代碼

module自己有幾種能夠配置的屬性

• namespaced:boolean 啓/停用 分模塊
• stateFactory:boolean 狀態工廠[我也不知道幹什麼的，有知道的能夠留言]
• dynamic:boolean 在store建立以後，再添加到store中。 開啓dynamic以後必須提供下面的屬性
• name:string 指定模塊名稱
• store:Vuex.Store實體 提供初始的store

dynamic 模式

動態模式爲反向注入store。

常規下是

export default new Vuex.Store({
    modules:{  TestModule }
})
複製代碼

開啓後爲

// store.ts
export default new Vuex.Store({
    modules:{  /* 其他的store */ }
})
複製代碼

import store from './store'
@Module({
    dynamic:true,
    name: "TestModule", 
    store
})
export default class TestModule extends VuexModule { }
// 在須要引用的地方單獨引用該store文件便可注入。
// 好處：靈活使用，僅僅在須要引入的地方纔注入到store中去
// 缺點：須要單獨引入文件
複製代碼

3. @Mutation 標註爲mutation

@Module
export default class TestModule extends VuexModule {
    inlineState = "";
    @Mutation
    setInlineStateSync(inlineState:string){
        this.inlineState = inlineState;
    }
}
複製代碼

4. @Action 標註爲action

用法和@Emit很類似

@Module
export default class TestModule extends VuexModule {

    @Action({ commit: 'setInlineStateSync' })
    setInlineState(inlineState:string){
        /*這裏使用自動提交*/
        return inlineState;
    }
    @Action
    setInlineStateContext(inlineState:string){
        /* 這裏使用手動提交 */
        this.context.commit("setInlineStateSync",inlineState)
    }
}
複製代碼

5. @MutationAction

這個屬性能夠直接映射屬性，

• mutate 提供屬性列表

@Module
export default class TestModule extends VuexModule {
    
    foo = "";
    doo = "";
    
    @MutationAction({mutate:["foo","doo"]/*提供須要映射的屬性列表*/})
    async setMutationAction(payload:{foo:string,doo:string} /* 傳入的payload對象屬性須要和mutate的名稱一致*/){
        /* 這裏若是有返回，則必須返回一個Promise<{foo:string,doo:string}>類型*/
        /* 可是在使用時，則有很奇葩的事情*/
        /* 若是映射爲Mutation [ @Mutation("TestModule/setMutationAction") ],則不會執行函數自己, 使用傳入的值做爲結果*/
        /* 若是映射爲Action [ @Action("TestModule/setMutationAction") ]，會執行函數自己而且獲得的返回值爲結果 */
    }
}

複製代碼

6. getModule 獲得一個類型安全的store，module必須提供name屬性

@Module({ name : "tm" })
export default class TestModule extends VuexModule {
    
}
複製代碼

常規，須要提供store，即：

getModule(TestModule,this.$store).inlineState  // "inlineState value"
複製代碼

開啓dynamic時，不須要提供store，由於module自己已經注入store。

getModule(TestModule).inlineState  // "inlineState value"
複製代碼

更多內容參照vuex-module-decorators 或者 github:vuex-module-decorators