vuex-module-decorators简单使用

官方文档：https://championswimmer.in/vuex-module-decorators/

安装：

npm install vuex-module-decorators

 

 

store/index.ts

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({});

 

store/module/user.ts

import {VuexModule, Module, Mutation, Action, getModule} from 'vuex-module-decorators'
import store from '@/store'

// 参数一：module名称，开启命名空间后会以name为命名空间
// 参数二：是否使用动态加载，简而言之只有在用到当前的module才会加载，详细可以看vuex官网。本篇博客必须选择true，
//        这也是为什么index.ts一直不用修改的原因，如果设置为false会有很大的变动，如果您真的需要这么做，可以自己研究一下，
//        或者私信我。
// 参数三：是否开启命名空间，如果你的模块很多，强烈建议开启
// 参数四：挂载的store目标
@Module({name: "user", dynamic:true, namespaced: true,store})
export default class User extends VuexModule{
    public name:string = '';
    public message: string = '未知';

    get getMessage(){
        return `当前时间${new Date()}：${this.message}`;
    }
    @Mutation
    private SET_NAME(name: string){
        this.name = name;
    }
    @Mutation
    private SET_MESSAGE(message: string){
        this.message = message
    }

    @Action
    public getUser(name: string){
        if (name === "admin") {
            this.SET_NAME("admin");
            this.SET_MESSAGE("测试成功");
        } else {
            this.SET_MESSAGE("测试失败");
        }
    }
}

export const UserModule = getModule(User);

参考资料：vuex的模块动态注册

上面的代码和下面是类似的

const UserModule = {
    state: {
        name: '',
        message: ''
    },
    getters: { 
        getMessage: state => `当前时间${new Date()}：${state.user.message}`
    },
    mutations: { 
        SET_NAME: (state, name) => {
            state.name = name
        },
        SET_MESSAGE: (state, message) => {
            state.message = message
        }
    },
    actions: { 
        getUser({commit}, name){
            if (name === "admin") {
                commit("SET_NAME", "admin");
                commit("SET_MESSAGE", "测试成功");
            } else {
                commit("SET_MESSAGE", "测试失败");
            }
        }
    },
    
}

 

使用

User.vue

<template>
    <div>
        <el-input v-model="aaa" @blur="changeVal"></el-input>
        <br>
        {{$store.state.user.message}}
    </div>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import {UserModule} from '@/store/module/user'
    @Component
    export default class User extends Vue {
        private aaa = '';
        private changeVal(){
            console.log(UserModule.message);
            UserModule.getUser(this.aaa);
        }
    }
</script>

在script中使用state的内容或者action的方法，你都可以直接用模块调取，但是在html模板中只能用$store的方式获取