Having used both React and Vue extensively. I'd say React's great at Single Page Apps in the true sense of the word, Apps that have a single UI like an IDE:
Vue's also nicer for "page-based" Websites that are converted into Single Page Apps. Nuxt.js really shines here which lets you develop complete Websites using Vue's Single File Components and takes care of routing by following a conventional page structure. Nuxt.js + Vuetify will be my goto for many traditional Website style Apps (implemented as SPAs) going forward. It imposes an opinionated convention but saves you a lot of effort having to manually configure and integrate different libraries together.
Vuex is more pragmatic and requires less effort/code to use than Redux, but Redux is great when you need to access previous states, e.g. it makes it effortless to capture "Snapshots" of the entire current state of the App that you can send to someone else so they load your App exactly as you see it:
As an aside (and since you brought up snapshots), mobx state tree https://github.com/mobxjs/mobx-state-tree seems to have combined the ease of use of Mobx with the power (and beyond) of Redux and its ecosystem.
I watched a video about Vuex last night, and with mutations, it seemed more convoluted than mobx state tree.
All of these are possible with Vuex. It's based on the same fundamental paradigm: a single state Singleton that renders everything.
You can even use Jest's snapshot testing for Vue components. Time travel also exists in Vue developer tools, and there are plenty of undo/redo plugins available.
It will never be as easy as Redux where the entire state is maintained in an immutable and naturally serializable plain JavaScript object in which all messages can be inspected, serialized, dehydrated, sent over the network, etc with every App state transition being easily captured / replayed or reverted to any period of time. You can force it with other state management libraries with additional machinery, but Redux's approach of sending plain JS object messages to create immutable states is naturally well suited for the task.
I'm sure they operate differently under the hood (and that's a bit of a black box for me), but as an end-user I can do any of those things with Vuex as well - time traveling, serializing state, subscribing to state mutations, etc. Doesn't require Dev Tools either, although obviously that's much more user-friendly.
Like I said it's possible but requires additional effort and machinery, with Redux your App already constructs and dispatches state transition instructions/delta messages and renders the plain state object as a first-class construct, whereas other state management libraries need to create foreign artificial constructs to support it.
Perhaps I'm missing something. Vuex state is almost a plain JavaScript object but with Vue's getters/setters on it. I can access the root state object easily with `store.subscribe((mutation, state) => {}`. Mutations feel nearly identical to reducers (but simpler!) and interact with the state as a plain JS object. What `foreign artificial constructs` are we talking about here?
EDIT: I assumed Vuex state was immutable outside of mutations, but that's only true with 'strict' mode enabled.
- https://github.com/ServiceStack/Gistlyn
Vue's nicer to use without any build tools using just vanilla JavaScript:
- https://github.com/NetCoreWebApps/Redis
Vue's also nicer for "page-based" Websites that are converted into Single Page Apps. Nuxt.js really shines here which lets you develop complete Websites using Vue's Single File Components and takes care of routing by following a conventional page structure. Nuxt.js + Vuetify will be my goto for many traditional Website style Apps (implemented as SPAs) going forward. It imposes an opinionated convention but saves you a lot of effort having to manually configure and integrate different libraries together.
Vuex is more pragmatic and requires less effort/code to use than Redux, but Redux is great when you need to access previous states, e.g. it makes it effortless to capture "Snapshots" of the entire current state of the App that you can send to someone else so they load your App exactly as you see it:
- https://github.com/ServiceStack/Gistlyn#snapshots
Or when you need to sync state changes between network apps:
- https://github.com/ServiceStackApps/typescript-redux
But if you don't need these features, in general Vuex/Mobx is easier and requires less effort to develop with.