使用 Vuex + TypeScript 时项目中常用的装饰器

前言：

1. 当前用到了创建项目应该会自带的 vue-property-decorator npm包
2. 代码中 el-* 的标签是 ElementUI 的组件。

---

一、安装 npm 包

使用下面三条命令行进行包的安装

npm install vuex --save
npm install vuex-module-decorators -s
npm install vuex-class -s

二、装饰器的简单运用

1) 创建并在项目中引入 Vuex

首先在 src 文件夹中创建一个名为 vuex 的文件夹，并在其中创建名为 store.ts 的文件，
store.ts 的内容如下：

	import Vue from 'vue';
	import Vuex from 'vuex';
	import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';
	
	Vue.use(Vuex);
	
	@Module
	class VuexStore extends VuexModule {
	    public foo: number = 111;
	
	    get axles() {
	        return this.foo / 2;
	    }
    
	    @Action({ commit: 'MutationMeth' })
	    public ActionMeth() {
	        return 8; 
	    }
	
	    @Mutation
	    public MutationMeth() {
	        ++this.foo; // 改变 this.foo
	    }
	}
	
	export default new Vuex.Store(VuexStore);

随后在 main.ts 中引入刚刚创建的 store.ts 文件。

	import Vue from 'vue';
	import App from './App.vue';
	import router from './router';
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	import store from '@/vuex/store';
	
	Vue.config.productionTip = false;
	Vue.use(ElementUI); // 引入所有ElementUI组件
	
	new Vue({
	  router,
	  store,
	  render: (h) => h(App),
	}).$mount('#app');

2) 在 Vue组件 中使用 Vuex

	<template>
	  <div class="home">
	    <div>通过 Vuex 获得的值：{{ stateFoo }}------{{ axles }}</div>
	    <el-button type="primary" @click="ActionMeth">经过Action</el-button>
	    <el-button type="primary" @click="MutationMeth">不经过Action</el-button>
	  </div>
	</template>
	
	<script lang="ts">
	import { Component, Vue } from 'vue-property-decorator';
	import { State, Action, Mutation, Getter } from 'vuex-class';
	
	@Component
	export default class Home extends Vue {
	  @State private foo!: number; // 同名
	
	  @State('foo') private stateFoo!: number; // 重命名
	
	  @Getter private axles!: number; 
  
	  @Action('ActionMeth')
	  private ActionMeth!: () => void;
	
	  @Mutation('MutationMeth')
	  private MutationMeth!: () => void;
	}
	</script>

在 @click=“ActionMeth” 和 @click=“MutationMeth” 时，
可直接写成 @click=“ActionMeth(11)” 和 @click=“MutationMeth(22, 33)” 来给 Module 传递参数。

三、使用 Module 将 store 分割成模块

1) 修改 store.ts

我在这里将 store.ts 简化了，除去了 Mutation 、 Action 和 Getter，只用 State 和 Module。

	import Vue from 'vue';
	import Vuex from 'vuex';
	import { VuexModule, Module } from 'vuex-module-decorators';
	
	Vue.use(Vuex);
	
	@Module
	class VuexStore extends VuexModule {
	  public static namespaced = true; // 静态的
	  public foo: number = 2222;
	}
	
	export default new Vuex.Store({
	  modules: {
	    test: VuexStore,
	  },
	});

以上重点是 VuexStore 的 namespaced 字段，
随后就是暴露实例化的位置，test 表示名为 test 的命名空间。

2) 修改 Vue组件

这里也除去了 Mutation 、 Action 和 Getter，只用 State 和 Module。

	<template>
	  <div class="home">
	    <h1>This is an home page</h1>
	    {{ stateFoo }}
	  </div>
	</template>
	
	<script lang="ts">
	import { Component, Vue } from 'vue-property-decorator';
	import { State, namespace } from 'vuex-class';
	
	@Component
	export default class Home extends Vue {
	  @namespace('test').State('foo') private stateFoo!: number; // 重命名
	}
	</script>

这里指定了 stateFoo 这个字段是 test 命名空间下的 foo 字段的重命名。

---

参考文档

• vuex-module-decorators
• vuex-class
• 如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )