layout: default title: vue-db titleLink: https://github.com/taowen/vue-db description: Get rid of as many mutable states as possible

About

The sole goal of vue-db is to unleash vue 3 reactivity system full potential to get rid of as many mutable states as possible. When other state management library encrouages maintaining a separate copy of data store, vue-db tries to do the opposite.

• direct cross component data sync, such as form
• load data from backend and keeping it up to date
• type-safe RPC with graph query opt-in
• server side rendering (SSR) data fetching

It looks like a lot, but it is a 500 line library only depending on vue. Install it via npm install vue-db, then register to vue app

import * as vdb from 'vue-db'

app.use(vdb);

Form

Instead of using https://vuex.vuejs.org/ to hold the state, vue-db use the vue component instance itself as data store.

• user type inputs into the form components through ui
• in computed property, use vdb.load or vdb.query to locate the data source and keep data in sync
• when submit, use vdb.walk to dump the form state out and show validation error back

Checkout following examples

| code | live | demo | | --- | --- | --- | | counter | counter | vdb.load with $root from current page | | flat form | flat form | vdb.walk to dump form state | | nested form | nested form | vdb.load with $parent allowing multiple form instances | | todo list | todo list | vdb.waitNextTick to add new todo item |

Async data binding

Data from backend need to be loaded asynchronously. Instead of using a mutable https://vuex.vuejs.org/ store to hold the backend data, vue-db provides async data binding to bind vue component data with backend table.

• vdb.defineResource to describe the data to be loaded from server table. table name is just a string, the server can interpret it as anything. vue-db does not specify the rpc protocol, and does not include any server side implementation.
• vdb.query or vdb.load the resource defined, bind to vue component data
• render page with the data. as async data loading takes time, this time the data will be empty array containing nothing.
• server responded with data, which triggers the vue component to re-render again
• vdb.defineCommand to define a function that can be used to call server to update data
• user clicked some button calling the command, which use its affectedTables definition to trigger component rerender

Checkout following examples

| code | live | demo | | --- | --- | --- | | todo client server | todo client server | vdb.defineResource and vdb.defineCommand to bind with backend data |

Type-safe RPC

If both server and client are written in typescript, the .d.ts file can be used as type-safe RPC data schema. vue-db allow you to import type and hand-write a RPC stub with very little code, instead of resorting to full blown code generation solution. Also vdb.defineResource support declaring nested resource, allow client to query for a object graph in one RPC roundtrip. However, the wire-protocol and server side implementation is excluded from the scope. vue-db is just a tiny library depending only on vue 3, it will not enforce a server/client framework to you.

Checkout following examples

| code | live | demo | | --- | --- | --- | | nested resource | nested resource | vdb.defineResource refer other resource |

SSR

Fetching initial data for server side rendering is a hard job. It normally requires you to extract out async data dependency into a central place, which makes CSR and SSR code different. vue-db aims to making same component code run in both client and server. You no longer need to lift the data fetching logic to page level, every component can declare its own async data dependency.

• async data fetched in server side
• intercept component render function to dehydrate the state into data-dehydrated attribute of rendered html element
• client side got the html and start hydration
• define component beforeMount lifecycle hook, read data-dehydrated and set state into component data

vue-db can work with any SSR framework, we recommend vue-fusion

Checkout following examples

| code | live | demo | | --- | --- | --- | | static page | static page | renderToString in node with async data provided by vdb.query | | server side render | server side render | async data vdb.query in server side, then hydrated in client side |