vuex数据传递流程

617 阅读1分钟

vuex数据传递流程

  1. 通过new Vuex.Store()创建一个仓库state是公共的状态,state--->components渲染页面
  2. 在组件内部通过this.$store.state属性来调用公共状态重的state,进行页面的渲染
  3. 当组件需要修改数据的时候,必须遵循单向数据流,通过this.$store.dispatch来触发actions中的方法
  4. actions中的每个方法都会接受一个对象 这个对象里面有一个commit方法,用来触发mutations里面的方法
  5. mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数 一个是store中的state,另外一个是需要传递到参数
  6. 当mutations中的方法执行完毕后state会发生改变,因为vuex的数据是响应式的 所以组件的状态也会发生改变

vuex的缺点

当路由发生变化的时候,vuex中的数据会变为初始值

原理