README
Vue Superstore
Why?
Intuitive data relationships for Vue.
Table of Contents
What's so great about Superstore?
With a simple Superstore configuration, you can do powerful things in your Vue component with intuitive, out-of-the-box database-connected interactions.
OK... so how do I easily create a project?
const project = superstore.project.create({
name: 'Project #1'
})
And a task?
superstore.task.create({
title: 'Create an example',
complete: true,
projectId: project.id
})
And how can I access the tasks of a project?
project.tasks
And what can I do in a Vue template?
<li v-for="task in project.tasks">
<input type="checkbox" :checked="task.complete" @change="task.save()">
<input type="text" v-model="task.title" @blur="task.save()">
<a @click="task.destroy()">x</a>
</li>
Even better... your data can be backed by one REST API, S3 file, or custom storage solution. Best of all, you can supply multiple stores – useful for syncing data to LocalStorage or adding a backup data storage service.
For a full demo, check out the example folder. In addition, each file in lib's folders contains detailed front-matter about usage.
Example Configuration
import { reactive } from 'vue'
const superstore = new Superstore(reactive, {
project: {
relationships: {
tasks: {
type: 'HasMany'
}
},
props: ['name'],
computed: {
username() { // Available via `this.username`
return this.name.toLowerCase()
}
},
methods: {
updateName (name) { // Available à la `project.updateName()`
this.name = name
this.save()
}
}
},
task: new Superstore.Models.Storage({
props: {
title: { type: String, default: '' },
complete: { type: Boolean, default: false }
},
store: { // Store tasks in LocalStorage
type: 'Local',
name: 'tasks'
}
})
})
const project = superstore.project.create({
name: 'Project #1'
})
superstore.task.create({
title: 'Create an example',
complete: true,
projectId: project.id
})
Models
There are a few types of models. You can explore each of them in the models folder.
Options
{
primaryKey: 'id',
props: ['name'], // Array or Object syntax
relationships: { // Define model relationships
tasks: {
type: 'HasMany'
}
},
computed: { // Define computed properties for each instance
nickname() {
return this.name.toLowerCase().slice(0, 3)
}
},
methods: { // Define methods for each instance
updateName (name) {
this.name = name
this.save()
}
}
}
Methods
superstore.project.build({}) // Relationships are not reflected, returns instance
superstore.project.create({}) // Builds AND saves the instance, returns instance
superstore.project.query() // Promise that returns all projects
superstore.project.find(123) // Promise that returns a single instance
In some cases, it is helpful to be able to create items in memory only, without persisting to stores:
superstore.project.inMemory.create()
Instance
An Instance is the representation of the instance of a model (eg. record). There are a few convenience methods on each Instance.
Methods
project.save() // Saves the project (eg. usable by a hasMany, resets project's changes)
project.destroy() // Removes the project
project.toJSON() // Maps the project to JSON
project.changes() // Lists the changes to the project since last save
project.hasChanges() // If the project has unsaved changes
project.rollback() // Reset project to the last saved state
Relationships
Belongs To
Options supported:
foreignModel: [String, optional] The linked model's type
primaryKey: [String, optional] The primary model's attribute
foreignKey: [String, optional] The foreign model's attribute
Has Many
Options supported:
foreignModel: [String, optional] The linked model's type
primaryKey: [String, optional] The primary model's attribute
foreignKey: [String, optional] The foreign model's attribute
Stores
A Store is the adapter that connects to your data storage.
This configuration would store all "accounts" in a single .json:
new Superstore({
account: {
store: {
type: 's3',
accessKeyId: '',
secretAccessKey: '',
bucket: '',
endpoint: 'https://s3.us-east-1.amazonaws.com',
apiVersion: 'latest',
maxRetries: 1
extension: '.json'
}
}
})
You can explore each of them in the stores folder.