Vuex学习笔记

  为Vue.js应用程序开发的状态管理模式

  由 多个组件共享状态 引起的

  每个应用只包含一个Store实例

  Vuex 的状态存储是响应式的。store 中的state状态更新立即触发组件更新

  不能直接修改state。

  两种方式:

  可以通过 this.$store.state.变量=xxx; 进行修改

  显式地提交 (commit) mutation

  this.$store.dispatch(actionType, payload)=> mapActions 使用action进行更改,异步

  this.$store.commit(commitType, payload)=> mapMutations 使用mutation进行更改,同步

  可以通过 this.$store.state.变量=xxx; 进行修改

  strict模式使用第一种方法vue会throw error : [vuex] Do not mutate vuex store state outside mutation handlers。

  异同点

  共同点:都能触发视图更新(响应式修改)

  不同点:

  strict模式下,使用第一种方法vue会throw error : [vuex] Do not mutate vuex store state outside mutation handlers。

  使用commit的优点:

  vuex能够记录每一次state的变化记录,保存状态快照,实现时间漫游/回滚之类的操作。

  State

  全局的应用层级状态 -- 唯一数据源

  通过this.$store.state可以访问

  mapState 辅助函数:帮助在组件中引入state相关属性,作为组件的计算属性

  Getter

  可以认为是 store的计算属性 : getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

  通过属性访问:this.$store.getters.getterA

  getter作为Vue的响应式系统的一部分缓存其中

  通过方法访问:this.$store.getters.getterC(1)

  每次都会去进行调用,而不会缓存结果

  mapGetters: 将getters数据映射到局部(组件)计算属性

  Mutation

  用来更改Vuex的store中的状态

  每个mutation包含

  事件类型(type)

  回调函数 (handler): 进行状态更改的地方,接收state作为第一个参数

  通过store.commit方法 调用mutation handler

  (state, payload)=> {}

  payload: 向store.commit传入的额外的参数

  需遵守Vue的响应规则

  store中初始化所有所需属性

  添加新属性用 Vue.set(obj, 'newProp', 123); 或者 state.obj={ ...state.obj, newProp: 123}

  Mutation必须是同步函数

  devtools 不知道什么时候回调函数实际上被调用:在回调函数中进行的状态的改变都是不可追踪的

  Action

  类似Mutation,不同在于:

  Action 提交的是mutation,而不是直接变更状态

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处://a/scsk/20200702-539.html