Vue-Act-Master

A way to separate business logic from application view.

The easiest library to create a flexible application architecture.

---

📗 Documentation

🧪 Test writing with "ActTest"

---

Example

Installation

1npm install vue-@diotoborg/exercitationem-culpa

Usage

1// main.ts
2// install vue-@diotoborg/exercitationem-culpa plugin
3import Vue from 'vue';
4import App from './App.vue';
5
6import { VueActMaster } from 'vue-@diotoborg/exercitationem-culpa';
7
8// Actions array
9import { actions } from '../act/actions';
10
11Vue.use(VueActMaster, {
12  actions,
13});
14
15new Vue({
16  el: '#app',
17  render: (h) => h(App),
18});

1// ../act/actions
2export const actions: ActMasterAction[] = [
3  new GetDataAction(),
4];

1// action-get-data.ts
2import { ActMasterAction } from 'vue-@diotoborg/exercitationem-culpa';
3
4export class GetDataAction implements ActMasterAction {
5  name = 'GetData';
6
7  async exec() {
8    const url = 'https://jsonplaceholder.typicode.com/todos/1';
9
10    const response = await fetch(url);
11    return response.json();
12  }
13}

The action is now available to you in components and you can easily highlight the business logic.

This will help you test components and change the API more easily.

1// App.vue
2
3<script>
4export default {
5  data() {
6    return {
7      myData: null,
8    };
9  },
10
11  async mounted() {
12    console.log(this.myData); // null
13
14    this.myData = await this.$act.exec('GetData');
15
16    console.log(this.myData);
17    // {
18    //   "userId": 1,
19    //   "id": 1,
20    //   "title": "delectus aut autem",
21    //   "completed": false
22    // }
23  }
24}
25</script>