首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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模块的具体使用(小白教程)

我们需要定义一个属性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>

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 模块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

Vam的金豆之路

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
Java File类的常用方法总结
Mar 18 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
layui的table中显示图片方法
Aug 17 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JS实现可控制的进度条
Mar 25 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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
B+树(2) instantclient(1) 优化(1) 增删改查(2) 存储过程(3) redo log(1) 写入策略(1) 忘记密码(1) pt-archiver(1) binlog(2)
You might like
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
python3生成随机数实例
2014/10/20 Python
Python的动态重新封装的教程
2015/04/11 Python
Python基于select实现的socket服务器
2016/04/13 Python
python 常用的基础函数
2018/07/10 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python求绝对值的三种方法小结
2019/12/04 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
英国汽车和货车租赁网站：Hertz英国
2016/09/02 全球购物
全球性的在线购物网站：Zapals
2017/03/22 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
活动总结模板
2014/05/09 职场文书
岗位说明书标准范本
2014/07/30 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python