◆ Vuex は Redux と違って Vue が必要
◆ Vuex は初期値の state オブジェクトに Setter が内部でつけられてプロパティ更新
◆ Redux は新しい state オブジェクトを作る
◆ Redux は非同期をサポートしてないけど Vuex だとサポートしてる

特に Vue.js は使ってないのですが なんとなく Vuex のドキュメント見てたら Redux と違って Vuex は Vue.js に依存するみたいです
https://vuex.vuejs.org/ja/

そういえば Redux は React で使われるのがほとんどだと思いますが React 側に依存した作りではないです
他のツールで使うこともできます
Vuex の場合は Vue 専用にしてる分 最適化して効率が良いらしいですね

軽く触れてみたところ Vue が必要ですが 中で使ってるだけなので Vuex 自体は Redux とそう変わらず使えます
かと言って Vuex だけじゃなく Vue までロードが必要なので Vue とは関係ないところで使うのには向いてません
それなら Redux 使ったほうが良さそうです

それぞれで単純に state の値を更新するサンプルです

比較

Vuex

const v = require("vue")
const vx = require("vuex")

v.use(vx)

const store = new vx.Store({
state: {
count: 0,
},
mutations: {
up(state, payload) {
state.count += ~~payload
},
down(state, payload) {
state.count -= ~~payload
}
}
})

store.subscribe((mutation, state) => {
console.log("mutate: ", mutation, state.count)
})

store.commit("up", 1)
store.commit("up", 10)
store.commit("up", 100)
store.commit("down", 11)
mutate:  { type: 'up', payload: 1 } 1
mutate: { type: 'up', payload: 10 } 11
mutate: { type: 'up', payload: 100 } 111
mutate: { type: 'down', payload: 11 } 100

Redux

const r = require("redux")

const reducer = (state, action) => {
switch (action.type) {
case "up":
return state + action.payload
case "down":
return state - action.payload
default:
return 0
}
}

const store = r.createStore(reducer)

store.subscribe(() => {
console.log("mutate: ", store.getState())
})

store.dispatch({ type: "up", payload: 1 })
store.dispatch({ type: "up", payload: 10 })
store.dispatch({ type: "up", payload: 100 })
store.dispatch({ type: "down", payload: 11 })
mutate:  1
mutate: 11
mutate: 111
mutate: 100

書き方

書き方を比べてみると Vuex のほうが一つのオブジェクトにまとめられてすっきりしていて好きです

Redux の場合 関数型的な考え方なのでオブジェクトとして state を持っているのではなく関数の返り値です
更新のときは state がオブジェクトの場合 別のオブジェクトである必要があります
同じオブジェクトでプロパティ変更しただけでも動きはするのですが推奨されていません
同じオブジェクトでプロパティ書き換えていくと過去の状態を残せないですからね
{ ...obj } 構文があるので プロパティコピーはそこまで難しくないですが 面倒であることに変わりないです

elm でも似たようなものですが elm の場合は言語的にイミュータブルでプロパティの上書き相当のことができないので仕方ない感がありました
JavaScript の場合はできるのに やったらダメって制限されてるので特に不便さを感じます

その点では Vuex は素直にプロパティ書き換えれば良いので書きやすいです
自動で Setter が作られてるのでプロパティ書き換えですが内部で必要に応じた処理が行われます

非同期

Redux では非同期が標準でサポートされていません
Reducer の更新処理の中で fetch とかしてはいけないです
外部のミドルウェアを使ったり View 側でやることになります
私自身は Redux 使ったもので非同期処理するようなものを作ってないので その苦労を体感してないですが Redux を使ってみたときにどうやるんだろうと調べてみたら 多くの辛いという感想を目にしました

Vuex の場合は Vuex 自体が非同期処理もサポートしてます
同期処理の commit/mutation に対して dispatch/action で同じような感じです
action の中では commit を呼び出して更新を行います
わざわざ分ける必要あるのかなって気はしますが Vuex だけで非同期処理も扱えるのはいいですね

そういえば 2, 3 年くらい?前に個人的に作ったウェブアプリで Redux とかの外部ライブラリは使わず DOM の外の 1 箇所でまとめてアプリケーション状態を管理するようにしていたものがあります
そのときは Redux の Reducer に当たる部分で非同期処理もして サーバとの通信もそこで一括管理するようにしていました
state をオブジェクトを直接更新してたので Vuex よりかもしれません
EventListener 的なもので DOM 側から dispatch される type に応じて関数を設定するもので 同期関数も非同期関数も特に分けず使ってました

非同期を特別扱いしなくてもそれで特に困ったこともなかったです
Redux や Vuex の考え方だと更新処理が起きたタイミングをすべてログできるのかもしれないですが そんな完璧にしなくてもいいことのほうが多いので ライブラリ使わずその場で簡単なものを作ればそれで済むことも多そうです