AI 助理
备案控制台
开发者社区 云计算 文章 正文

VueX的模块你知道多少?

2022-04-29 144
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 为什么会出现VueX的模块呢？当你的项目中代码变多的时候，很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。那么我们就开始吧！

一、模块是啥？

/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  // 在以下属性可以添加多个模块。如：moduleOne模块、moduleTwo模块。
  modules: {
    moduleOne:{},
    moduleTwo:{}
  }
})


二、在模块内添加state

可以直接在模块中直接书写state对象。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      state:{
        moduleOnevalue:'1'
      }
    },
    moduleTwo:{
      state:{
        moduleTwovalue:'0'
      }
    }
  }
})


我们在页面中引用它。我们直接可以找到对应的模块返回值，也可以使用mapState方法调用。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            // 这里使用了命名空间
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        })
    },
    methods: {
    },
    mounted() {
    },
}
</script>


微信截图_20220429144045.png


三、在模块中添加mutations

我们分别给两个模块添加mutations属性，在里面定义相同名字的方法，我们先在页面看一下。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      }
    },
    moduleTwo:{
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      } 
    }
  }
})


在页面引用它


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        })
    },
    methods: {
        ...mapMutations(['updateValue'])
    },
    mounted() {
        this.updateValue('我是改变后的值：1')
    },
}
</script>


我们看到两个模块的值都被改变了，为什么呢？因为VueX默认情况下，每个模块中的mutations都是在全局命名空间下的。那么我们肯定不希望这样。如果两个模块中的方法名不一样，当然不会出现这种情况，但是怎么才能避免这种情况呢？


微信截图_20220429144102.png


我们需要定义一个属性namespaced为true。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      namespaced:true, //在每个模块中定义为true,可以避免方法重名
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      }
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      } 
    }
  }
})


在页面中需要使用命名空间的方法调用它。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
    },
    mounted() {
        this['moduleOne/updateValue']('我是改变后的值：1');
        this['moduleTwo/updateValue']('我是改变后的值：0');
    },
}
</script>


微信截图_20220429144116.png


四、在模块中添加getters

namespaced 同样在 getters也生效，下面我们在两个模块中定义了相同名字的方法。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        }
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        }
      } 
    }
  }
})


在页面引用查看效果。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
    },
    mounted() {
         // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
    },
}
</script>


微信截图_20220429144130.png


我们也可以获取全局的变量，第三个参数就是获取全局变量的参数。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.global
        }
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.global
        }
      } 
    }
  }
})


在页面查看。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
    },
}
</script>


微信截图_20220429144149.png


也可以获取其他模块的变量。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
        },
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
        },
      } 
    }
  }
})


在页面查看。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
        <p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
        <p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus',
            OneotherValue:'moduleOne/otherValuePlus',
            TwootherValue:'moduleTwo/otherValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
    },
}
</script>


微信截图_20220429144204.png


五、在模块中添加actions

actions对象中的方法有一个参数对象ctx。里面分别{state,commit,rootState}。这里我们直接展开用。actions默认只会提交本地模块中的mutations。如果需要提交全局或者其他模块，需要在commit方法的第三个参数上加上{root:true}。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
        },
      },
      actions:{
        timeOut({state,commit,rootState}){
          setTimeout(()=>{
            commit('updateValue','我是异步改变的值：1')
          },3000)
        }
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
        },
      } 
    }
  }
})


页面引用。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
        <p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
        <p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus',
            OneotherValue:'moduleOne/otherValuePlus',
            TwootherValue:'moduleTwo/otherValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
        ...mapActions(['moduleOne/timeOut'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
        this['moduleOne/timeOut']();
    },
}
</script>


微信截图_20220429144221.png


下面我们看下如何提交全局或者其他模块的mutations。


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  mutations:{
    mode(state,data){
      state.global=data
    }
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
        },
      },
      actions:{
        timeOut({state,commit,rootState}){
          setTimeout(()=>{
            commit('updateValue','我是异步改变的值：1')
          },3000)
        },
        globaltimeOut({commit}){
          setTimeout(()=>{
            commit('mode','我改变了global的值',{root:true})
          },3000)
        }
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
        },
      } 
    }
  }
})


页面引用。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
        <p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
        <p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus',
            OneotherValue:'moduleOne/otherValuePlus',
            TwootherValue:'moduleTwo/otherValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
        ...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
        // this['moduleOne/timeOut']();
        this['moduleOne/globaltimeOut']();
    },
}
</script>


微信截图_20220429144249.png


那么提交其他模块的呢？


/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    global:'this is global'
  },
  mutations:{
    mode(state,data){
      state.global=data
    }
  },
  modules: {
    moduleOne:{
      namespaced:true,
      state:{
        moduleOnevalue:'1'
      },
      mutations:{
        updateValue(state,value){
          state.moduleOnevalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleOnevalue+'1'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
        },
      },
      actions:{
        timeOut({state,commit,rootState}){
          setTimeout(()=>{
            commit('updateValue','我是异步改变的值：1')
          },3000)
        },
        globaltimeOut({commit}){
          setTimeout(()=>{
            commit('mode','我改变了global的值',{root:true})
          },3000)
        },
        othertimeOut({commit}){
          setTimeout(()=>{
            commit('moduleTwo/updateValue','我改变了moduleTwo的值',{root:true})
          },3000)
        }
      } 
    },
    moduleTwo:{
      namespaced:true,
      state:{
        moduleTwovalue:'0'
      },
      mutations:{
        updateValue(state,value){
          state.moduleTwovalue=value
        }
      },
      getters:{
        valuePlus(state){
          return state.moduleTwovalue+'0'
        },
        globalValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.global
        },
        otherValuePlus(state,getters,rootState){
          return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
        },
      } 
    }
  }
})


页面引用。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
        <p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
        <p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus',
            OneotherValue:'moduleOne/otherValuePlus',
            TwootherValue:'moduleTwo/otherValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
        ...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut','moduleOne/othertimeOut'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
        // this['moduleOne/timeOut']();
        // this['moduleOne/globaltimeOut']();
        this['moduleOne/othertimeOut']();
    },
}
</script>


微信截图_20220429144306.png


注意：你可以在module中再继续添加模块，可以无限循环下去。


六、动态注册模块

有时候，我们会使用router的异步加载路由，有些地方会用不到一些模块的数据，那么我们利用VueX的动态注册模块。我们来到入口文件main.js中。


import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 动态注册模块
store.registerModule('moduleThree',{
  state:{
    text:"this is moduleThree"
  }
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


在页面引用它。


<template>
    <div class="home">
        <p>moduleOne_state：{{moduleOne}}</p>
        <p>moduleTwo_state：{{moduleTwo}}</p>
        <p>moduleOne_mapState：{{moduleOnevalue}}</p>
        <p>moduleTwo_mapState：{{moduleTwovalue}}</p>
        <p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
        <p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
        <p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
        <p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
        <p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
        <p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
        <p>moduleThree_mapState：{{moduleThreetext}}</p>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name:"Home",
    data() {
        return {
            msg:"this is Home"
        }
    },
    computed: {
        moduleOne(){
            return this.$store.state.moduleOne.moduleOnevalue
        },
        moduleTwo(){
            return this.$store.state.moduleTwo.moduleTwovalue
        },
        ...mapState({
           moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
           moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue,
           moduleThreetext:(state)=>state.moduleThree.text
        }),
        ...mapGetters({
            OnevaluePlus:'moduleOne/valuePlus',
            TwovaluePlus:'moduleTwo/valuePlus',
            OneglobalValue:'moduleOne/globalValuePlus',
            TwoglobalValue:'moduleTwo/globalValuePlus',
            OneotherValue:'moduleOne/otherValuePlus',
            TwootherValue:'moduleTwo/otherValuePlus'
        })
    },
    methods: {
        ...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
        ...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut','moduleOne/othertimeOut'])
    },
    mounted() {
        // this['moduleOne/updateValue']('我是改变后的值：1');
        // this['moduleTwo/updateValue']('我是改变后的值：0');
        // this['moduleOne/timeOut']();
        // this['moduleOne/globaltimeOut']();
        // this['moduleOne/othertimeOut']();
    },
}
</script>


微信截图_20220429144323.png


游客ksbqbsfjgo6v6
目录
相关文章
小吴吴吴呀
|
8月前
|
存储 JavaScript 开发者
Pinia和Vuex的区别
Pinia和Vuex的区别
小吴吴吴呀
1794 0
东方睿赢
|
8月前
|
JavaScript
Vue状态管理：在Vuex中，什么是模块（module）？
Vue状态管理：在Vuex中，什么是模块（module）？
东方睿赢
64 1
生产队的驴.
|
JavaScript
Vue Vuex模块化编码
Vue Vuex模块化编码
生产队的驴.
57 0
那年春天
|
3月前
|
存储 JavaScript API
Vuex 和 Pinia 的区别
【10月更文挑战第18天】Vuex 和 Pinia 都有各自的优势和适用场景。Vuex 适合较为大型和复杂的项目，强调严格的架构和流程；而 Pinia 则更适合中小型项目以及对灵活性和简洁性有更高要求的开发者。你可以根据项目的具体需求和个人喜好来选择使用哪一个状态管理库。
那年春天
697 59
刘大猫.
|
3月前
|
存储 JavaScript 前端开发
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
刘大猫.
28 3
java冯坚持
|
3月前
|
存储 Web App开发 监控
Vuex学习一：了解Vuex，初始用vuex，vuex状态管理图的讲解
这篇文章是关于Vuex的基本使用和状态管理的教程，包括项目搭建、Vuex配置、状态共享问题、Vuex介绍以及如何在Vue组件中使用Vuex进行状态管理。
java冯坚持
35 0
Vuex学习一：了解Vuex，初始用vuex，vuex状态管理图的讲解
热爱技术的小郑
|
5月前
|
存储 JavaScript 前端开发
Vuex在项目中的实际应用
文章介绍了如何在Vue项目中使用Vuex来实现关怀模式（字体和界面元素放大），通过在Vuex的Store中定义状态、存储和获取状态，并动态改变组件的样式来实现这一功能。
热爱技术的小郑
58 0
Vuex在项目中的实际应用
CodeQi技术小栈
|
5月前
|
存储 JavaScript API
从 Vuex 到 Pinia：解决 Pinia 缺失的三个基本功能
从 Vuex 到 Pinia：解决 Pinia 缺失的三个基本功能
CodeQi技术小栈
205 1
Goodluck-dys
|
8月前
|
存储 JavaScript
vuex和pinia区别
vuex和pinia区别
Goodluck-dys
467 0
萤火虫的小尾巴
|
JavaScript
[vue]多组件共享数据与vuex模块化
[vue]多组件共享数据与vuex模块化
萤火虫的小尾巴
102 0
[vue]多组件共享数据与vuex模块化

热门文章

最新文章

  • 1
    多中心容灾实践：如何实现真正的异地多活？
  • 2
    持续定义SaaS模式云数据仓库+数据银行
  • 3
    charles抓包显示乱码解决方法
  • 4
    千亿美元规模，云计算的下半场将走向何方？
  • 5
    DSP_代码笔记（基于TMS320X281x）
  • 6
    TypeScript 泛型
  • 7
    又爱又恨的BOOTSTRAP
  • 8
    AngularJS中使用service，并同步数据
  • 9
    平板电脑进化论：从玩具到工具
  • 10
    屌丝程序员在夏始春末拍的罗曼史之夏婚系列---结婚了
  • 1
    【C语言程序设计——循环程序设计】求解最大公约数（头歌实践教学平台习题）【合集】
    37
  • 2
    【C++数据结构——栈与队列】顺序栈的基本运算（头歌实践教学平台习题）【合集】
    111
  • 3
    【C语言程序设计——循环程序设计】统计海军鸣放礼炮声数量（头歌实践教学平台习题）【合集】
    31
  • 4
    【C语言程序设计——循环程序设计】利用循环求数值 x 的平方根（头歌实践教学平台习题）【合集】
    31
  • 5
    【C++面向对象——类与对象】Computer类（头歌实践教学平台习题）【合集】
    32
  • 6
    【C++面向对象——类与对象】Computer类（头歌实践教学平台习题）【合集】
    29
  • 7
    【C++数据结构——图】最短路径（头歌教学实验平台习题） 【合集】
    32
  • 8
    【C++数据结构——树】二叉树的性质（头歌实践教学平台习题）【合集】
    26
  • 9
    【C++数据结构——树】哈夫曼树（头歌实践教学平台习题） 【合集】
    31
  • 10
    【C++面向对象——类与对象】CPU类（头歌实践教学平台习题）【合集】
    29

    • 相关课程

    更多
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅