vuex && redux

什么是vuex

Vuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单地说就是采用全局单例模式，将组件的共享状态抽离出来管理，使组件树中的每一个位置都可以获取共享的状态（变量）或者触发行为。
额，或者更直白的说就是响应式的全局变量

vuex四种状态之间的区别

state	共享状态（即变量）
getter	使用getters只是对state中的数据进行封装，返回一个新数据，对原数据并不影响！
mutation	更改vuex的store中状态的唯一方法，通过提交mutation修改状态，同步操作（规则上是不允许异步操作的，虽然异步也可以执行，但是对devtool调试的状态跟踪或多个状态更改操作相互依赖是很不好的，所以不要觉得只要不报错我就可以这么用，还是尽量按照规则来比较好）
action	类似mutation，不同之处，1.通过提交mutation修改状态 2.支持异步操作
module	模块，在大型项目中为了方便状态的管理和协作开发将store拆分为多个子模块（modules），每个子模块拥有完整的state、mutation、action、getter

//将vuex注入到全局vue组件中去使用
Vue.use(Vuex);

state

{{this.$store.state.count}}  //this可以省略

mutations

  //通过mutations修改store中的数据，虽然繁琐，但是可以集中监控所有数据的变化！
  //切记mutations中只能使用同步代码改变state中的数据
  mutations: {
        add(state) {
            state.count++;
        },
     }

在组件中触发由两种方式

第一种

import { mapMutations } from "vuex";
methods: {
    //通过该函数，将需要的mutations函数，映射为当前组件的methods方法！
    ...mapMutations(["add"])
    }

第二种

methods:{
          subs:function(){
          //通过commit触发mutations中的函数
          this.$store.commit('sub');
         }, 
      }

actions

actions是异步触发mutations中的方法，进而达到改变state数据的目的

addAsync(context, step) {
            //在actions中不能直接修改state中的数据,它提交的是mutation!
            //Action 可以包含任意异步操作
            setTimeout(() => {
                //通过这个方法可以提交mutation!
                context.commit('adds', step);
            }, 1000);
        },

触发actions的两种方式
第一种

import { mapMutations } from "vuex";
methods:{
        //将actions中的方法映射到组件的methods中来，直接使用
           ...mapActions(['subAsync']),
    }

第二种

 methods: {
 addAsync: function() {
      //通过dispatch可以分发调用mutation!并处理返回的promise对象
      this.$store.dispatch("addAsync", 5);
    }
 }

redux

Redux 是用于做 状态管理 的 JS 库，可以用于 React、Angular、Vue 等项目中，常用于 React，集中式管理 React 应用多个组件共享的状态。

工作流程：
1 Action Creators 创建 action ：同步 action 是一个普通对象，异步 action 是一个函数
2 Store 调用 dispatch() 分发 action 给 Reducers 执行
3 Reducers 接收 previousState 、action 两个参数，对状态进行加工后返回新状态
4 Store 调用 getState() 把状态传给组件

action ：
表示动作的对象，包含 2 个属性
type ：标识属性，值为字符串，唯一，必须属性
data ：数据属性，类型任意，可选属性
{type: ‘increment’, data: 2}

reducer ：
用于初始化状态、加工状态
根据旧状态和 action 产生新状态
它本质就是个纯函数

纯函数概念
1 如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。
2 该函数不会产生任何可观察的副作用，例如网络请求，Math.random()，获取的当前时间这些都是会造成副作用的函数。

store ：
Redux 核心对象，内部维护着 state 和 reducer
核心 API
store.getState() ：获取状态
store.dispatch(action) ：分发任务，触发 reducer 调用，产生新状态
store.subscribe(func) ：注册监听函数，当状态改变自动调用

异步redux

安装异步中间件：

npm install redux-thunk -S

react-redux

React-Redux 是一个插件库，用于简化 React 中使用 Redux

React-Redux 将组件分为两类：

UI 组件
只负责 UI 呈现，不带有业务逻辑
通过 props 接收数据
不能使用 Redux 的 API
保存在 components 文件夹下

容器组件
负责管理数据和业务逻辑，和 Redux 通信，将结果交给 UI 组件
可使用 Redux 的 API
保存在 containers 文件夹下