State management in Vue 3: store pattern vs useX pattern

This page summarizes the projects mentioned and recommended in the original post on /r/vuejs

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • vuex

    🗃️ Centralized State Management for Vue.js.

  • A use case was in the SO question that I linked earlier: https://stackoverflow.com/q/41503527, i.e. fetching some data from the state based on some arguments. There's also a more specific example and a longer discussion in https://github.com/vuejs/vuex/issues/145. Vuex just makes it more difficult than it needs to be. I prefer to define a standard method in Vue rather than create an artificial getter that returns a function. Higher order functions are ok when they're a natural solution for a problem, in this case they just feel like a hack. And it's not only how you define such a method, but also how you use it later. By mixing it with other getters and knowing that getters are cached, it's not obvious that in this case the returned data will not be cached.

  • vue-devtools

    Discontinued ⚙️ Browser devtools extension for debugging Vue.js applications. [Moved to: https://github.com/vuejs/devtools]

  • Vue Devtools, one of the selling points of Vuex, doesn't log actions, only mutations. See https://github.com/vuejs/vue-devtools/issues/179.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • rfcs

    RFCs for substantial changes / feature additions to Vue core (by vuejs)

  • 1, 6. The fact that Vue Devtools chooses to log only mutations, and not actions, just adds to the strangeness and doesn't make the separation an advantage. If not for the separation, there would be no problem. See https://github.com/vuejs/devtools/issues/179#issuecomment-732767004, which kinda proves the validity of my point. From what I see in https://github.com/vuejs/rfcs/discussions/270, the plans to get rid of mutations in Vuex have not changed.

  • vue-component-store

    Plugin for keeping the state of your Vue.js application inside components.

  • I've written a custom plugin, based on provide/inject, to keep everything in the components. It solves all my points, well, except for 6th, but I'm used to debugging code with console.log anyway :)

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts