VueX模块的具体使用(小白教程)


Posted in Javascript onJune 05, 2020

为什么会出现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>

VueX模块的具体使用(小白教程)

三、在模块中添加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都是在全局命名空间下的。那么我们肯定不希望这样。如果两个模块中的方法名不一样,当然不会出现这种情况,但是怎么才能避免这种情况呢?

VueX模块的具体使用(小白教程)

我们需要定义一个属性namespacedtrue

/* 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>

VueX模块的具体使用(小白教程)

四、在模块中添加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>

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'
 },
 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>

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'
 },
 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>

VueX模块的具体使用(小白教程)

五、在模块中添加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>

VueX模块的具体使用(小白教程)

下面我们看下如何提交全局或者其他模块的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>

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'
 },
 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>

VueX模块的具体使用(小白教程)

注意:你可以在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>

VueX模块的具体使用(小白教程)

到此这篇关于VueX模块的具体使用(小白教程)的文章就介绍到这了,更多相关VueX 模块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python实现学生成绩测评系统
2020/06/22 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
阿里云:Aliyun.com
2017/02/15 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
创业计划书详解
2019/07/19 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js