关于vuex

希望初学者可以初步理解vuex的日志：

示意图：

一.图例：

　　1.Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

　　2.dispatch：（obj）操作行为触发方法，是唯一能执行action的方法。在dispatch定义多个函数，【可以包含同步/异步操作】。

　　3.actions：操作行为处理模块，执行接口调用方法和执行commit操作。

　　4.commit:状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

　　5.mutations：(obj) 状态改变操作方，是Vuex中修改state的唯一推荐方法，在mutations对象中定义多个操作state的函数。

【函数只能进行同步操作，且方法名只能全局唯一】。

　　6.state页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一。在vue组件中通过：this.$store.state.~ 来获取state的值。

二.流程解读：

　　（vuex规定所有的数据操作必须通过:action–>mutation–>state change 的流程来进行：）

　　1.在vue组件中dispatch，如：dispatch调用action中的【getMessgeList】函数，并传入参数 msgData：

this.$store.dispatch('getMessgeList', msgData)

　　2.action中的getMessgeList被调用后执行自己的操作，如：异步调用接口，通过接口api获取数据【messageList】。然后执行commit操作，commit调用mutation中的【SET_MESSAGE_LIST】方法，并将接口返回值【messageList】作为参数传入：

async ['getMessgeList'] ({ commit }, parameter) {

    let messageInfo = await getMessageApi(parameter) // 调用getMessageApi获取接口数据的函数

    commit(’SET_MESSAGE_LIST', messageInfo)

}

3.mutation中的【SET_MESSAGE_LIST】方法修改state ，如：

SET_MESSAGE_LIST(state, messageInfo){

    state.thisRouterName = messageInfo

}

巴特西

关于vuex

希望初学者可以初步理解vuex的日志：

最新文章

热门文章