Vue Superstore

Why?

Intuitive data relationships for Vue.

Table of Contents

1. What's so great about Superstore?
2. Example Configuration
3. Models
4. Instance
5. Relationships
   1. Belongs To
   2. Has Many
6. Stores

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.

• local
• rest
• s3
• s3-by-instance