• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vuex namespaced 命名空间

366 0

我们有时候在使用vuex模块的时候,在其中加了一个键值对为:namespaced : true

export default {
    namespaced: true,
    state {        
      zoom: 15
    },
    getters:{},
    mutations:{},
    actions:{},
}

namespacedtrue的作用是告诉vuex,该模块所有的state 、getters、mutations、actions里面的东西调用时都需要加上命名空间,这个命名空间就是该模块被improt时命名的名字。

假设这个模块的名字为map.js

我们引入

import map from './map'

export default new Vuex.Store({
  modules: {
    map
  }
})

map就是他的命名空间

调用的时候

this.$store.state.map.zoom;

如果是方法,getters,mutations,actions,他的调用略有不同

getters:{
  zoom(state){
    return state.zoom;
  }
}

调用:

this.$store.getters['map/zoom'];

如果使用辅助函数...mapGetters()

...mapGetters({
  zoom : 'map/zoom'
})

或者指定一个命名空间

...mapGetters('map',['zoom'])

如果你的模块嵌套了多个的话,也可以指定

...mapGetters('map/config/mapcontent',['zoom'])

这样获取的是map模块里面的config模块里面的mapcontent模块中的_zoom_

另一种方式是使用createNamespacedHelpers方法

import { createNamespacedHelpers } from "vuex";
const {mapGetters} = createNamespacedHelpers('map');

export default {
  computed: mapGetters(['zoom']);
}

访问全局元素

我们可以在getter中访问根状态和根getter

getters :{
  zoom: (state,getters,rootState,rootGetters)=>{
  
  }
}
  1. state为当前模块的state
  2. getters为当前模块的getters
  3. rootState为根元素state
  4. rootGetters为根元素getters

通过rootState我们可以访问所有的存储在state中的内容

通过rootGetters可以访问所有的getters方法

而在action中,略有不同

actions:{
  zoom: ({dispatch,commit,getters,rootGetters})=>{

    commit("zoom",2,{root:true})
  }
}

除了基本的引入对应的dispatch,commit这些,还有rootGetters这些根元素

通过根元素可以访问可以理解,那么{root:true}这个第三个参数什么意思?

它表示触发的是根元素的commit中的zoom方法

3
  • 本文分类:vue 基础
  • 本文标签:namespaced命名空间
  • 流行热度:已超过 366 人围观了本文
  • 最后更新:2020年09月27日 - 10时52分22秒
  • 发布日期:2020年04月28日 - 21时59分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码