vuex namespaced 命名空间

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

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

namespaced为true的作用是告诉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方法