Data Flow & Encoding

Onelink relies on a specific data flow to function without a backend database. The core logic resides in utils/transformer.js.

The Transformer Utility

The project uses the js-base64 library to handle encoding and decoding.

Source Code (utils/transformer.js)

import { encode, decode } from "js-base64";

export const encodeData = (obj) => {
  return encode(JSON.stringify(obj));
};

export const decodeData = (base64) => JSON.parse(decode(base64));

Encoding Process

  1. State Collection: The Vue reactive state in pages/index.vue collects user input into a JSON object.
  2. Stringify: JSON.stringify(obj) converts the object to a string.
  3. Encode: encode() converts the string to Base64.
  4. URL Generation: The resulting string is appended to the URL query parameter data.

Decoding Process

  1. Route Extraction: In pages/1.vue, the query parameter is accessed via useRoute().
  2. Decode: decode() converts the Base64 back to a string.
  3. Parse: JSON.parse() converts the string back to a JavaScript object.
  4. Hydration: The object is passed to the template component (<templates-simple>) to render the UI.