VueX 모듈 의 구체 적 인 사용(소 백 튜 토리 얼)

왜 VueX 모듈 이 나 오지?프로젝트 에 코드 가 많아 졌 을 때 유 지 를 구분 하기 가 쉽 지 않 습 니 다.그러면 이때 Vuex 의 모듈 기능 은 이렇게 나 타 났 다.
그럼 시작 합 시다!
1.모듈 이 무엇 입 니까?

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

2.모듈 에 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>

3.모듈 에 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 은 전체 네 임 스페이스 에 있 기 때문이다.그럼 우 리 는 그 러 고 싶 지 않 을 거 야.만약 두 모듈 중의 방법 명 이 다르다 면 당연히 이런 상황 이 발생 하지 않 을 것 이다.그러나 어떻게 해야만 이런 상황 을 피 할 수 있 겠 는가?

우 리 는 하나의 속성 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>

4.모듈 에 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>

우 리 는 전역 변 수 를 가 져 올 수 있 습 니 다.세 번 째 매개 변 수 는 전역 변 수 를 가 져 오 는 매개 변수 입 니 다.

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

다른 모듈 의 변 수 를 가 져 올 수 있 습 니 다.

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

5.모듈 에 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>

전역 또는 기타 모듈 의 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>

그럼 다른 모듈 을 제출 하 는 건 요?

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

메모:모듈 에 모듈 을 계속 추가 할 수 있 습 니 다.무한 순환 할 수 있 습 니 다.
6.동적 등록 모듈
때때로,우 리 는 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 모듈 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

FreeBSD (Apache)에서 확장 모듈 설정 및 "로그"획득

이번에는 확장 모듈을 사용하여 FreeBSD에 기능을 추가해 봅시다. Apache에는 초기 상태에서 많은 모듈이 설치되어 있습니다. 사용자 인증 액세스 제한 HTTPS 프로토콜 구현 Proxy 기능 로그 등등・・・ ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

VueX 모듈 의 구체 적 인 사용(소 백 튜 토리 얼)

좋은 웹페이지 즐겨찾기