Search code examples
vue.jsvuejs2vuexvuejs3vue-reactivity

Vue.js reactivity features in backend application?


I'm wondering if there's someone knowledgeable in Vue(2 or 3)'s reactivity that might be able to answer this question and explain reasons.

This is regarding features such as data() reactivity (getters & setters), computed properties, a global Vue instance, and even a Vuex store.

Is there a way I could tap into just these non-browser javascript features for use in a backend-only Node.js application?

I need a way to have a global store holding temporary data that can update "components" in other files via mapState/mapGetters.

I'm using lowdb currently for this because it suits my needs in terms of shapeable JSON objects, where something like redis is key:value-only. (Don't want to get into a more complex redis/rejson setup.)

Basically I need a globally accessible relatively-full-featured reactivity system on the backend, without global variables or needing to set up a custom Rxjs system, which is a bit over my head and will take too much momentum away from my goals, time-wise.

I'd appreciate any input. Thanks 🙂


Solution

  • Vue is designed to run inside Node to support SSR (server side rendering). There is already a good post here on SO with simple sample for Vue 2 (using Vue + Vuex)

    But it seems overkill to me. If you want something much simpler and lightweight, you can use package @vue/reactivity which is normally part of the Vue 3 but can be used completely standalone. It is basically Vue 3 reactivity system based on JS proxies

    Why would I choose this approach:

    1. No Vue 2 Change Detection Caveats
    2. More "functional" API (designed for their new Composition API) with much better support for TypeScript and type inference (even without TS)
    3. I think Vuex API is super bad (using string constants for data mapping - especially with modules. It's pain...)

    As it is part of Vue 3, you can use it's documentation:

    1. Basic Reactivity APIs
    2. Refs