vuex typescript + vuex-module-decorators 面向对象写法

安装

yard add vuex-module-decorators 
yard add vuex

例子

这里举一个简单的 user 对象例子

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

export interface IUserState {
	name: string;
	id: number;
}

@Module({ dynamic: true, store, name: 'user', namespaced: true })
class User extends VuexModule implements IUserState {
	name = ''
	id = 0
	
  @Mutation
  private SET_NAME(value: string) {
    this.name = value
  }

  @Action
  public setName(value: string) {
    this.SET_NAME(value);
  }
  
  @Mutation
  private SET_ID(value: number) {
    this.id = value
  }

  @Action
  public setId(value: number) {
    this.SET_ID(value);
  }

}

export const UserModule = getModule(User);

使用的页面page

<template>
  <div class="p-index">
    欢迎来到首页

    <div>vuex: name {{ user.name }}</div>
    <div>vuex: id {{ user.id }}</div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { UserModule } from "@/store/module/user";
@Options({})
export default class PageIndex extends Vue {
  get user() {
    return UserModule;
  }

  mounted() {
    UserModule.setName("张三");
    UserModule.setId(99);
  }
}
</script>

<style scoped>
.p-index {
  text-align: center;
}
</style>

效果图

总结

旧的使用方法点击查看
相比之前的旧方法，面向对象的写法更容易理解，更方便操作