vue-act-master

A way to separate business logic from application view.

Usage no npm install needed!

<script type="module">
  import vueActMaster from 'https://cdn.skypack.dev/vue-act-master';
</script>

README

Vue-Act-Master

A way to separate business logic from application view.

The easiest library to create a flexible application architecture.

npm bundle size npm version

vue-act-master

๐Ÿ“— Documentation

๐Ÿ—บ Example project structure

๐Ÿงช Test writing with "ActTest"


Example

Installation

npm install vue-act-master

Usage

// main.ts
// install vue-act-master plugin
import Vue from 'vue';
import App from './App.vue';

import { VueActMaster } from 'vue-act-master';

// Actions array
import { actions } from '../you/actions/path';

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

new Vue({
  el: '#app',
  render: (h) => h(App),
});
// ../you/actions/path
export const actions: ActMasterAction[] = [
  new GetDataAction(),
];
// action-get-data.ts
import { ActMasterAction } from 'vue-act-master';

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>