vuex的概述

Vuex的概述

• 组件之间共享数据的方式

               父向子传值：v-bind 属性绑定

               子向父传值：v-on 事件绑定

               兄弟组件之间共享数据：EventBus

                         $on   接收数据的那个组件

                         $emit   发送数据的那个组件

注意：以上组件之间传值适用于小范围内，如果组件之间频繁的共享数据，则需要使用vuex

•  Vuex是什么？

           Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

组件传值

• 使用Vuex统一管理状态的好处
  • 能够在vuex中集中管理共享的数据，易于开发和后期维护
  • 能够高效的实现组件之间的数据共享，提高开发效率
  • 存储在vuex中的数据都是响应式的，能够实时保持数据和页面的同步
• 什么样的数据适合存储到Vuex中？
  • 一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中，对于组件的私有数据，依旧存储在组件自身的data中。
• 组成：state、mutation、action、module、getter

  • getters：用来对store的state里边的数据进行筛选，为什么过滤数据要写在这个里边呢？是因为如果多个组件都需要进行数据筛选，那么就没必要在每个组件里单独写，只需要放在getters执行，解决了代码的冗余

  • mutations：通过commit触发mutation，从而改变state；在组件内部methods里也可以触发mutation   this.$store.commit('fn',{payload})

  • actions:Action提交的是mutation，而不是直接变更状态。可以包含任意异步操作。

  •  一般不会在组件内部直接commit触发mutation，而是在组件内部通过dispatch触发action，在action里commit去触发mutation

• 工作流程

  • 页面用户通过dispatch触发action，action通过commit触发mutation，mutation去直接变更state，伴随着state的改变就会重新渲染页面。