vuex各模块简单小结

对vuex做一个简单的小总结，从整体感知vuex每个模块的作用

export default {

// 在state中定义属性数据

state:{},

// 在getters中设置或修改state中的数据，每个属性都是个方法，并且有返回值，类似于computed，需要依赖state中的数据，做出改变后得到一个新的属性

getters:{},

// 在mutations中定义方法，处理state中的数据，接受actions中提交的数据，必须是同步事件，目的是数据是响应式的，为了让devtool工具追踪数据前后变化

// 主要做两件事：将传入的值设置给state中的数据，将传入的值保存到内存中

mutations:{
    mutationsName(state,newData) {
      // state为上面state的映射值，newData为传入的新值，可以使用newData设置state
      // 在此处可以设置处理state的状态（更新state状态，保存新值到内存中）
        state.name = newData.name
    },
},

// 在actions中定义方法，处理mutations中的方法，

// 作用：通过commit('mutations中方法名'，data)触发并执行mutations中的方法，将data传入到mutations中，data可能是一部获得的数据

// 触发actions方式：

// 方式一：使用dispatch('actions中的方法名'，data)触发，data可能为要发送异步请求传入的参数，在封装请求中常见，despatch方法可以处理返回值是promise的处理函数，并且仍旧返回promise，这样可以使用async/await

await store.dispatch('handleLogOut')

// 方式二：当做方法，结合mapActions使用，从mapActions中解构出来方法，当做接口api调用

//在组件中：

...mutations(['actionsFnName'])

async xxx () {

    await this.actionsFnName()

}

//store文件中：

actions:{

    actionsFnName(context,params) {

    //context是个对象，可以结构state,getters,commit,即参数1也可以直接写为   {state,getters,commit}

    // params可以是异步请求需要的参数



    // 触发commit，执行mutation中的某个方法，data为要传入的更新state的新值

        commit(mutationsName,data)

    }

},

// modules用于将store分割不同的模块，每个模块都有各自的state,getters,mutations,actions

// 对于模块内部的getter,mutation: 第一个参数是模块的局部state状态

// 对于模块内部的action: context.state表示局部状态，context.rootState表示根节点状态(全部state的状态)

modules:{

    app,

    user

    ...
    
}

}

vuex各模块简单小结

猜你喜欢