How to write pages in Vue + typescript (Vuex Decorator supplement — Store Decorator)

This chapter is a complement to the previous chapter on how to write pages using Vue + typescript (vuex decorator)

Before using the Store decorator, let’s take a look at the traditional store usage

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)
        }
    }
}
Copy the code

And then start using itvuex-module-decorators

import {
Module,
VuexModule, 
Mutation, 
Action, 
MutationAction, 
getModule } from 'vuex-module-decorators'
Copy the code

1. VuexModule is used for basic attributes

export default class TestModule extends VuexModule {}Copy the code

VuexModule provides some basic attributes, including namespaced, state, getters, modules, mutations, the actions, the context in which the context will be used in the following code to

2. The @module flag is currently Module

@Module
export default class TestModule extends VuexModule {
    /* state */
    inlineState = "";
    /* This is the content of getters */
    get named(){
        return 1; }}Copy the code

The Module itself has several properties that can be configured

• namespaced:booleanStart/stop modules
• stateFactory:booleanStatus factory [I also don’t know what to do, know can leave a message]
• dynamic:booleanAfter the store is created, it is added to the store. The following properties must be provided when Dynamic is enabled
• name:stringSpecify the module name
• Store: Vuex. Store entityProvide the initial store

The dynamic model

The dynamic mode is reverse injection store.

Under the normal is

export default new Vuex.Store({
    modules:{  TestModule }
})
Copy the code

After open for

// store.ts
export default new Vuex.Store({
    modules: {/* Other stores */}})Copy the code

import store from './store'
@Module({
    dynamic:true.name: "TestModule", 
    store
})
export default class TestModule extends VuexModule {}// Simply reference the store file where it is needed for injection.
// Benefits: flexible use, injected into store only where needed
// Disadvantages: need to import files separately
Copy the code

3. @mutation indicates Mutation

@Module
export default class TestModule extends VuexModule {
    inlineState = "";
    @Mutation
    setInlineStateSync(inlineState:string){
        this.inlineState = inlineState; }}Copy the code

4. @action annotated as Action

The usage is similar to @emit

@Module
export default class TestModule extends VuexModule {

    @Action({ commit: 'setInlineStateSync' })
    setInlineState(inlineState:string){
        /* Automatic submission is used here
        return inlineState;
    }
    @Action
    setInlineStateContext(inlineState:string){
        /* Manual submission is used here
        this.context.commit("setInlineStateSync",inlineState)
    }
}
Copy the code

5. @MutationAction

This property can map directly to properties,

• Mutate provides a list of attributes

@Module
export default class TestModule extends VuexModule {
    
    foo = "";
    doo = "";
    
    @MutationAction({mutate: ["foo"."doo"]/* Provides a list of attributes to map */})
    async setMutationAction(payload:{foo:string,doo:string} /* The attribute of the payload object passed in must match the name of the mutate object */) {Return a Promise<{foo:string,doo:string}> type */
        /* There are some weird things about using it */
        / * if mapped to Mutation [@ Mutation (" TestModule/setMutationAction ")], does not perform the function itself, use the incoming values * / as a result
        / * if the mapping is the Action [@ Action (" TestModule/setMutationAction ")], will perform the function itself and get the return value of a * / for results}}Copy the code

6. GetModule gets a type-safe store. Module must provide the Name attribute

@Module({ name : "tm" })
export default class TestModule extends VuexModule {}Copy the code

General, need to provide store, i.e. :

getModule(TestModule,this.$store).inlineState  // "inlineState value"
Copy the code

When Dynamic is enabled, there is no need to provide store because the Module itself already injects store.

 getModule(TestModule).inlineState  // "inlineState value"
Copy the code

See vuex-module-decorators or Github :vuex-module-decorators for more information