TehShrike/abstract-state-router

For example:
store.js

import {fetchJSON, mutateArray} from './utils';
export default {
  fetchJSON: fetchJSON,
  mutateArray: mutateArray,
  syntaxHighlight: syntaxHighlight,
    todoStore:{
      todos: ['Example 1', 'Example 2', 'Example 3'],
      users: [],
    },
}

utils.js

const fetchJSON = async(url) => { return ( await fetch(url).then(r => r.json() ) )}
const mutateArray = async(storeVar, array) => { return array.map(item => storeVar.push(item)) }
export { fetchJSON, mutateArray}

Todo.vue

<template>
  <div>
    <h1 id="title">Global Store State</h1>
    <pre id="highlight-code" v-html="formattedStore" />
    <div id="list-container">
    <div class='list animated tada'>
      <h1>
        To-do List
      </h1>
      <ul v-if="todoStore.todos && todoStore.todos.length">
        <li v-for="(todo, index) in todoStore.todos" @click="emitEvent('removeTodo', index)">
          <a href='#'>
            <i class='icon ion-android-done'></i>
          </a>
          {{todo}}
        </li>
      </ul>
     </div>
     <div class="webflow-style-input">
         <input  placeholder="Add todo's here" v-model="todoInput"></input>
         <button @click="emitEvent('addTodo')"><i class="icon ion-android-arrow-forward"></i></button>
       </div>
   </div>
  </div>
</template>

<script>
import todoController from '../store/controllers/todoController';
export default {
  name: 'Todo',
  store: ['todoStore'],
  events: todoController.events,
  methods: todoController.methods,
  computed: {
    formattedStore() {
      return this.$store.syntaxHighlight(JSON.stringify(this.$store, undefined, 4));
    }
  },
  created() {
    this.fetchUsers();
  }
}
</script>

todoController.js

export default {
  events: {
    addTodo: function() {
      this.todoStore.todos.push(this.todoInput)
      this.todoInput = ''
    },
    removeTodo: function(index) {
      this.todoStore.todos.splice(index, 1)
    },
    setUsers: function(userList) {
      this.$store.mutateArray(this.todoStore.users, userList);
    }
  },
 methods: {
    emitEvent: function(eventName, payload) {
      this.$events.emit(eventName, payload)
    },
    fetchUsers: async function() {
      this.emitEvent('setUsers', await this.$store.fetchJSON('http://jsonplaceholder.typicode.com/users'))
    }
  }
}