Также библиотека управления состоянием Vuex похожа на Redux, почти та же идея, что и у Redux. Лично я считаю, что Vuex проще в использовании, чем Redux, возможно, потому, что после изучения Redux легче понять Vuex. Давайте кратко сравним их, сравнение может помочь нам научиться использовать их лучше, без кода.
1. Сравнение основных концепций
| Основные концепции Redux | Основные концепции Vuex |
|---|---|
| действие (синхронное действие, или асинхронная работа с помощью промежуточного ПО, действие не меняет хранилище, просто описывает, как изменить хранилище) | мутация (используется для синхронной операции), действие (может использоваться для асинхронной операции, отправка мутации) |
| редуктор (чистая функция, вычисляет новое хранилище на основе действия и старого хранилища | Изменить состояние непосредственно в мутации |
| магазин (единственный источник правды) | состояние (единственный источник правды) |
разное:
я) Редукс обеспечиваетstore.getState()Этот API получает дерево магазина иstore.subscribe(listener)Подпишитесь на сохранение изменений и вызывайте слушателей при изменении хранилища; Vuex имеетgetterКонцепция используется для получения некоторых данных на основе состояния, таких как вычисляемые свойства Vue, когда состояние изменяется, он пересчитывает результат и предоставляет его требуемым компонентам.
ii) Для больших проектов, когда данные о состоянии приложения слишком сложны, состояние можно разделить, чтобы облегчить управление потоком данных. Редукс может бытьcombineReducers（）В сочетании с редьюсером каждого компонента каждый компонент может независимо управлять своим состоянием и, наконец, объединяться в редюсер для создания хранилища; Vuex используетModuleЭта концепция разделяет хранилище, и, как и в Redux, можно вкладывать подсостояния в несколько слоев.
iii) Привязать данные состояния к представлениям: Redux сопоставляет состояние с представлениями, которые можно сопоставить с компонентами React через React-redux,
Конечно, вы также можете напрямую использовать те, которые предоставляет Redux.store.subscribe()Подпишитесь, чтобы сохранять изменения для обновления представления, поэтому Redux можно использовать не только для React, но и для других фреймворков, таких как Vue, тогда как Vuex можно использовать только для Vue, который обеспечиваетmapState,mapAction,mapMutationsПодождите, пока API сопоставит хранилище с каждым компонентом Vuex, который ссылается на React-redux.mapStateToProps.
2. Принципы использования:
Три принципа Redux:
（1）单一数据源（一个Redux应用只有一个store），也是单向的数据流；
（2）state只读（唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。）；
（3）使用纯函数（reducer）来修改state。
Три принципа Vuex:
a. 应用层级的状态应该集中到单个 store 对象中。
b. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
c. 异步逻辑都应该封装到 action 里面。
3. Обработка асинхронных операций
Redux выигрывает от механизма промежуточного программного обеспечения, использующего redux-thunk.（redux-thunk 可以 dispatch 函数，这个函数用于生成 action，所以在这个函数里面我们可以进行异步操作，等异步的结果出来后再放在 action 里面将这个 action 用 dispatch 分发出去, 而这个函数被叫做 “action creator” ）, вы можете поместить асинхронную логику в создателя действия, сделать реверс управления через создатель действия и передать отправку в качестве параметра создателю действия, чтобы вы могли отправить действие,（原本是通过 dispatch 来分发 action ,现在是异步 action 即 action creator 掌握了控制权调用 dispatch，所以叫控制反转), Redux не создает отдельной концепции для асинхронной логики. Он использует механизм промежуточного программного обеспечения, реализованный самим Redux. Промежуточное программное обеспечение обрабатывает действие от отправки асинхронного действия до действия, достигающего редуктора. В течение этого периода выполняется асинхронная операция. Полученные результаты могут быть помещены в действие и переданы редюсеру через диспетчеризацию.В прошлом, после отправки действия, действие сразу поступало в редуктор, поэтому это синхронное действие.Теперь в создателе действия мы можем дождитесь результата асинхронной операции через инверсию управления.Регенерируйте отправку действия, поэтому оно называется асинхронным действием:
И Vuex использует мутацию, чтобы соответствовать действию Redux.Кроме того, Vuex создает действие для отправки мутации и асинхронной отправки мутации для достижения результатов асинхронной операции, которые могут достигать состояния.
(пожалуйста, игнорируйте мой плохой стиль