深撸Vuex

熊孩子依旧调皮
81 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

两个关键字

集中式

集中式的状态管理

可预测

可预测的变更

设计理念

单向数据流，普遍认为，如果是单项的，则不管是有问题还是Bug，都会变得很简单，因此它的核心思想是解决单项数据流问题

  • 什么是单项数据流 在各个组件之间是有状态共享的，比如说共享状态，在各个维护共同维护这一个状态，但是如果这个状态变更的话，其他引入的该状态也会变，如果不变则页面会出问题，所以说需要有一个可预测可监控的状态管理。
  • 什么是可预测可监控 众所周知修改Vuex状态，必须要通过Commit修改Mutations状态之后，希望通知组件去更新，这就是就一个数据响应式，如果在Actions内有一个响应式对象，修改了它的状态后，其他的自然而然都改变了

使用

  • 安装
vue add vuex
  • 核心概念
  1. state状态
  2. 改变状态的Mutaions
  3. 处理复杂业务的Actions
  4. 统一管理以上概念的Store
  • 使用
  1. mainjs引入 为什么要在mainjs引入，因为要应用它的实例
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
  1. store内声明 在内声明State,mutaions,actions,modules，注意！ state是响应式对象
export default new Vuex.Store({
    state:{
        counter:0
    },
    mutaions:{
        add(state){
            state.counter++
        }
    },
    actions:{
        add({commit}){
            setTimeout(()=>{
                commit('add')
            },1000)
        }
    }

})

mutaions解析

在mutaions内，如果想改变conter，则需声明一个add在内接受一个state然后去改变它，但是它的state从何而来：

class Store {
  constructor(options = {}) {
      this._mutations = options.mutations || {}
  }
  commit(type, payload) {
  const entry = this._mutations[type]
  if (!entry) {
      console.error(`unknown mutation type: ${type}`);
      return
  }
      entry(this.state, payload);
  }
 }

根据用户传染的Type获取并执行对应的Mutaions，并指定上下文为Store实例，然后传递State给mutaion

actions解析

在Actions内声明一个方法，在内也接受一个state跟mutaions不同的是，改变状态的只有mutaions,所以对于actions来说是截然不同的，它接受的是从上下文中解构出来的commit，它的commit从何而来

class Store {
  constructor(options = {}) {
    this._actions = options.actions || {}
    const store = this
    const { commit, action } = store
    this.commit = function boundCommit(type, payload) {
      commit.call(store, type, payload)
    }
    this.action = function boundAction(type, payload) {
      return action.call(store, type, payload)
    }
  }
  dispatch(type, payload) {
    const entry = this._actions[type]
    if (!entry) {
      return
    }
    return entry(this, payload);
  }
}

根据用户传入的Type获取并执行对应的action，通过保存用户配置的actions选项，并绑定commit上下文，否则actions中调用commit时可能出问题

同时~ 也把action绑定，因为action可以互调，最后结果处理异常则需要返回Promise

avatar
文章
阅读
粉丝