zoukankan      html  css  js  c++  java
  • vuex梳理5 模块化modules 以及命名空间namespaced的使用

    在vuex的使用中经常会根据不同业务模块,也将vuex内部按不同模块进行使用,每个模块中同样分为state,mutations,actions,getters这几个部分

    import Vue from 'vue'
    import Vuex from 'vuex'
    import adv from "./adv"
    import goods from "./goods"
    import user from "./user"
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    
        state: {
            father: "发泽"
        },
        mutations: {
            SET_TITLE() {
                console.log("father,lalalalala");
            },
    
        },
        getters: {
            sums() {
                return 5;
            }
        },
        // 模块,将你的store进行了模块化。
        modules: {
            adv, // 广告模块
            goods, // 商品模块
            user //用户模块
        }
    })

    默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

    所以在不使用命名空间的情况下,在组件中直接通过 commit,和dispatch,getters来调用即可,不用添加对应模块的名字

    this.$store.dispatch('teaction')
    this.$store.commit('TEST_MUA')
    this.$store.getters.sumss

    需要注意的是,如果不同模块action和mutation内的函数名相同时,会同时调用所以名称相同的函数,不同模块下getters的函数则不允许重名

    state不受命名空间的影响使用时需要加模块名称

    this.$store.state.goods.goodsTitle  // goods代表模块名称

    使用命名空间时调用是要加模块名称,不加模块名则调用公共函数

    this.$store.dispatch('adv/teaction')
      this.$store.getters['adv/sumsss']

    在使用了命名空间的module中,若需要在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。如果不加则默认调用当前模块内的函数

    const actions = {
        teaction({
            dispatch,
            commit,
            getters,
            rootGetters
        }, params) {
            console.log('modal adv action', getters, rootGetters)
            commit('SET_TITLE', {}, {
                root: true
            })
        },
       
    };

    下面解释一下个参数的含义

    在某一midule中

    mutations: {
          
            TEST_MUA(state,) {
                // this.commit('adv/SET_TITLE', null, )
                console.log('modal goods mutations', state, this.state)
                this.dispatch('goodsavc')
           state代表当前模块中的state,this.state则表示整个store中的state } }, actions: { goodsavc({ commit,
           state rootState, rootGetters, getters }, params) { console.log(
    'aaaaaaaaaaaaa', rootState, rootGetters, getters) this.dispatch('run') }, state代表当前模块的state当然,不推荐在actions中直接修改state要同mutations进行操作
        rootState中可以获取到整个store中不同模块的数据 
        getters和rootGetters在不使用命名空间的情况下都代表store中所有的getters
        在使用命名空间时,getters代表当前模块getters,rootGetters代表store中所有getters
    }, getters: { sumss(state, getter, rootState, rootGetters) { console.log(
    'modal goods getters', getter, rootState, state, ) return 3; }, 同上 }
    龙丘居士亦可怜,谈空说有夜不眠。 忽闻河东狮子吼,拄杖落手心茫然。 多有画面感
  • 相关阅读:
    寿司点餐系统Sprint1总结
    寿司点餐系统一周总结
    对点餐APP现阶段开发的问题
    寿司点餐系统11.16
    Sprint
    R扩展包
    实验8 SQLite数据库操作
    实验7 BindService模拟通信
    实验6 在应用程序中播放音频和视频
    实验5 数独游戏界面设计
  • 原文地址:https://www.cnblogs.com/ybhome/p/15243782.html
Copyright © 2011-2022 走看看