A reactive datastore using lodash as the backend

lodash-reactive-store.js

import { reactive } from '@vue/reactivity';
import lodash from 'lodash';

const defaultState = {
  count: 1
};

/**
 * Create a database that is reactive
 */
const makeDb = (state = {}) => {
  const store = reactive(state);

  return lodash.chain(store);
};

export default makeDb({ state: defaultState });

template-example-counter.vue

<template>
  <button @click.prevent="updateCount">count is: {{ count }}</button>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import db from 'lodash-reactive-store.js';

const counter = db.get('state.count');
const count = ref(counter.value());

const updateCount = () => {
  // must call `.value()` to trigger the effect
  db.set('state.count', count.value + 1).value();
}

// runs on updates of the db state
watchEffect(() => {
  // fetch the fresh value from the db state
  count.value = counter.value();
});
</script>