Vue - Vuex

Vuex

1.什么是vuex ，什么时候使用vuex

vuex 是vue的状态管理器，当项目比较大，涉及到 复杂组件传参时，一般考虑使用 vuex。

vuex可以将项目中需要 多个组件传参的值统一管理在 vuex的store 中。

例如：购物车、 用户的登录状态、用户权限、用户的信息、 菜单的状态、车辆对比、购物网站 商品对比

猫眼的城市id 、手机对比篮 、

2.vuex 5大属性 ***

1. state 状态
2. mutations 只能在mutations 中修改状态值
   更改Vuex的store中的状态的唯一方法是提交mutations中的方法

this.$store.commit('increment',{count:0})

this.$store.commit({
    type:'increment',
    count:0
})

3. actions 将状态提交给 mutations ，做异步操作的,大数据量处理
   Action 提交的是 mutation，而不是直接变更状态。
   Action 可以包含任意异步操作。

this.$store.dispatch('incrementAction',{count:0})

this.$store.dispatch({
    type:'incrementAction',
    count:0
})

4. getters state的派生属性，因为在多个组件中使用 computed 进行 state的状态的转换，封装，将这部分重复的内容提出来放到 vuex的getters中

getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
可以使用this.$store.state获取Vuex中存储的状态

5. modules 模块 ，可以创建 多个子树

3.辅助函数

1.mapState 在computed中调用

2.mapGetters 在computed中调用

3.mapMutations 在methods中调用

4.mapActions 在methods中调用

4.vuex和缓存的区别：

​ 1.vuex 响应式的，某个组件更改了 vuex中的数据，其他组件都会跟着重新渲染，变化；vuex中的数据在刷新页面的时候，会重新

​ 2.localStorage ，非响应式的，必须手动的重新获取 缓存中的数据，才可以更改页面的数据;刷新页面时，对数据没影响，不会 重置

5.vuex流程： ***

​ 1.在vue的组件中 使用 dispatch 将 状态值 派发到 actions(动作集)

​ 2.在actions 中 使用 commit 将 状态值提交到 mutations

​ 3.在 mutations 中 修改 store(仓库)中的状态值

​ 4.当状态值发生变化时，会自动触发 render 重新渲染页面

​ 说明： actions 中 可以访问后台api ，所以可以执行 异步操作

​ 在 mutations中可调用开发工具，进行调试

6. mutations中 能不能进行异步操作？

能，但是不建议，因为 有悖于vuex的设计原理。

mutations中 进行异步操作时，状态值没办法检测到

Vuex也可以实现组件间的传值
Vuex可以用来管理数据
mutation中的方法按照规定最好不要涉及异步方法
一般使用ajax时会使用异步处理，而mutation是写同步操作的，异步一般写在actions中
由于Vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象
Vuex是单项数据流变更数据
actions通过commit触发mutations中的方法进行状态变更