欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用VueX模塊

這篇文章主要為大家展示了如何使用VueX模塊，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司2013年成立，先為蘭州等服務(wù)建站，蘭州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為蘭州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

為什么會(huì)出現(xiàn)VueX的模塊呢？當(dāng)你的項(xiàng)目中代碼變多的時(shí)候，很難區(qū)分維護(hù)。那么這時(shí)候Vuex的模塊功能就這么體現(xiàn)出來(lái)了。

那么我們就開(kāi)始吧！

一、模塊是啥？

/* 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'
 },
 // 在以下屬性可以添加多個(gè)模塊。如：moduleOne模塊、moduleTwo模塊。
 modules: {
  moduleOne:{},
  moduleTwo:{}
 }
})

二、在模塊內(nèi)添加state

可以直接在模塊中直接書(shū)寫(xiě)state對(duì)象。

/* 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'
   }
  }
 }
})

我們?cè)陧?yè)面中引用它。我們直接可以找到對(duì)應(yīng)的模塊返回值，也可以使用mapState方法調(diào)用。

<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

我們分別給兩個(gè)模塊添加mutations屬性，在里面定義相同名字的方法，我們先在頁(yè)面看一下。

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

在頁(yè)面引用它

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

我們看到兩個(gè)模塊的值都被改變了，為什么呢？因?yàn)閂ueX默認(rèn)情況下，每個(gè)模塊中的mutations都是在全局命名空間下的。那么我們肯定不希望這樣。如果兩個(gè)模塊中的方法名不一樣，當(dāng)然不會(huì)出現(xiàn)這種情況，但是怎么才能避免這種情況呢？

如何使用VueX模塊

我們需要定義一個(gè)屬性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, //在每個(gè)模塊中定義為true,可以避免方法重名
   state:{
    moduleOnevalue:'1'
   },
   mutations:{
    updateValue(state,value){
     state.moduleOnevalue=value
    }
   }
   
  },
  moduleTwo:{
   namespaced:true,
   state:{
    moduleTwovalue:'0'
   },
   mutations:{
    updateValue(state,value){
     state.moduleTwovalue=value
    }
   } 
  }
 }
})

在頁(yè)面中需要使用命名空間的方法調(diào)用它。

<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也生效，下面我們?cè)趦蓚€(gè)模塊中定義了相同名字的方法。

/* 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'
    }
   } 
  }
 }
})

在頁(yè)面引用查看效果。

<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模塊

我們也可以獲取全局的變量，第三個(gè)參數(shù)就是獲取全局變量的參數(shù)。

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

在頁(yè)面查看。

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

在頁(yè)面查看。

<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對(duì)象中的方法有一個(gè)參數(shù)對(duì)象ctx。里面分別{state,commit,rootState}。這里我們直接展開(kāi)用。actions默認(rèn)只會(huì)提交本地模塊中的mutations。如果需要提交全局或者其他模塊，需要在commit方法的第三個(gè)參數(shù)上加上{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
    },
   } 
  }
 }
})

頁(yè)面引用。

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

頁(yè)面引用。

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

頁(yè)面引用。

<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中再繼續(xù)添加模塊，可以無(wú)限循環(huán)下去。

六、動(dòng)態(tài)注冊(cè)模塊

有時(shí)候，我們會(huì)使用router的異步加載路由，有些地方會(huì)用不到一些模塊的數(shù)據(jù)，那么我們利用VueX的動(dòng)態(tài)注冊(cè)模塊。我們來(lái)到入口文件main.js中。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
// 動(dòng)態(tài)注冊(cè)模塊
store.registerModule('moduleThree',{
 state:{
  text:"this is moduleThree"
 }
})

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

在頁(yè)面引用它。

<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模塊

以上就是關(guān)于如何使用VueX模塊的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

分享名稱：如何使用VueX模塊
網(wǎng)頁(yè)URL：http://chinadenli.net/article12/gdghgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)