@hishprorg/natus-placeat-repellat v2.0.10

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

npm install @hishprorg/natus-placeat-repellat

Usage

// main.ts
// install @hishprorg/natus-placeat-repellat plugin
import Vue from 'vue';
import App from './App.vue';

import { VueActMaster } from '@hishprorg/natus-placeat-repellat';

// Actions array
import { actions } from '../act/actions';

Vue.use(VueActMaster, {
  actions,
});

new Vue({
  el: '#app',
  render: (h) => h(App),
});

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

// action-get-data.ts
import { ActMasterAction } from '@hishprorg/natus-placeat-repellat';

export class GetDataAction implements ActMasterAction {
  name = 'GetData';

  async exec() {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';

    const response = await fetch(url);
    return response.json();
  }
}

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.

// App.vue

<script>
export default {
  data() {
    return {
      myData: null,
    };
  },

  async mounted() {
    console.log(this.myData); // null

    this.myData = await this.$act.exec('GetData');

    console.log(this.myData);
    // {
    //   "userId": 1,
    //   "id": 1,
    //   "title": "delectus aut autem",
    //   "completed": false
    // }
  }
}
</script>