zoukankan      html  css  js  c++  java
  • Redux 和 Vuex 的区别

    vuex 和 redux 都是状态管理库,用于单独管理状态的。其中,redux是一个范用的库,可以单独使用。而vuex是专门用来配合vue使用的。他们都应用了flux架构的思想,但是在接口的提供上稍有不同。

    1. 核心概念对比

    Redux 的核心概念

       action (同步action ,或借助 中间件 实现异步操作,action 不会改变 store,只是描述了怎么改变store)| mutation(用于同步操作) 、action(可用于异步操作,提交 mutation)

       reducer(纯函数,根据 action 和旧的 store 计算出新的 store)

       store(单一数据源)

    Vuex 的核心概念

       mutation(用于同步操作) 、action(可用于异步操作,提交 mutation)

       mutation里面直接修改 state

       state(单一数据源)

    2. 使用原则:

    Redux 的三大原则:

      1)单一数据源(一个Redux应用只有一个store),也是单向的数据流

      2)state只读(唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象)

      3)使用纯函数(reducer)来修改state。

        redux的流程:

      view——>action——>store——>reducer(返回)——>store——view

    Vuex 的三大原则:

      (1) 应用层级的状态应该集中到单个 store 对象中。

      (2) 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

      (3)异步逻辑都应该封装到 action 里面。

      vue的流程:

           vueComponent——>(dispatch)action——>(commit)——>mutations——>(mutate)state——>(render)vueComponent

    3. 处理异步操作

    Redux 的中间件机制,利用 redux-thunk ,redux-thunk可以dispatch函数,这个函数用于生成action,所以在这个函数里我们可以进行异步操作,等异步的结果出来后再放在action里面,将这个action用dispatch分发出去,而这个函数被叫做 “action creator”,可以将异步逻辑放在 action creator 里面,给 action creator 传入 dispatch 作为参数,于是就可以 dispatch action,Redux 并没有创造单独的概念出来专门用于异步逻辑,它是利用了 Redux 自己实现的中间件机制,中间件从 dispatch 一个异步 action 到 action 到达 reducer 之间处理 action,在这期间通过异步操作得到的结果可以放到 action 里面再通过 dispatch 分发到 reducer,以前 dispatch 一个 action 之后,这个 action 回立即到达 reducer ,所以是同步 action,现在在 action creator 里面,可以等待异步操作结果再生成 action 分发,所以叫做异步 action

    而 Vuex 是用 mutation 来对应 Redux 的 action,另外 Vuex 又创造了一个 action 来提交 mutation 并通过异步提交 mutation 来实现异步操作结果能够修改 state.

  • 相关阅读:
    VituralBox 虚拟机网路设置 主机无线
    布局
    Git 安装
    剑指offer——33分行从上到下打印二叉树
    剑指offer——32从上到下打印二叉树
    剑指offer——31序列化二叉树
    剑指offer——30栈的压入、弹出序列
    剑指offer——30包含min函数的栈
    剑指offer——29顺时针打印矩阵
    剑指offer——28对称的二叉树
  • 原文地址:https://www.cnblogs.com/SF9924/p/14154612.html
Copyright © 2011-2022 走看看