目錄
前言：
- 當前用到了創建項目應該會自帶的
vue-property-decoratornpm包 - 代碼中 el-* 的標籤是 ElementUI 的組件。
一、裝飾器的簡單運用
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 字段的重命名。