Like ui-router, but without all the Angular. The best way to structure a single-page webapp.
TehShrike on master
Bump some dev dependencies to m… (compare)
TehShrike on ArtskydJ-patch-1
TehShrike on master
Change tehshrike.github.io link… Merge pull request #123 from Te… (compare)
ArtskydJ on ArtskydJ-patch-1
Change tehshrike.github.io link… (compare)
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'))
}
}
}
I personally think that barebones stores, with util functions and watched/computed properties with an observer/observable pattern to eliminate the need for component state, while also providing the flexibility to do things like declare classes/models with optional and required proptypes and possibly methods in-model is an ideal solution.
Something along the lines of a stripped-down MobX with optional and flexible structure implementation based on app scale/needs.