官方文档: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的方式获取