VueX的模块你知道多少？

亦凉 2021-08-29 01:23 428阅读 0赞

![在这里插入图片描述][20200419181427555.png]

为什么会出现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`对象。

我们在页面中引用它。我们直接可以找到对应的模块返回值，也可以使用`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>

![format_png][]

## 三、在模块中添加mutations ##

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

在页面引用它

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

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

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

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

![format_png 2][]

## 四、在模块中添加getters ##

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

在页面引用查看效果。

![format_png 3][]

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

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

![format_png 4][]  
也可以获取其他模块的变量。

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

![format_png 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>

![format_png 6][]

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

![format_png 7][]  
那么提交其他模块的呢？

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

![format_png 8][]

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

![format_png 9][]

--------------------

![format_png 10][]

[20200419181427555.png]: /images/20210813/5eb39ea5e6f6462db7cd07bcf7b4e282.png
[format_png]: /images/20210813/1cdcf19168c74425b8fae352feca2834.png
[format_png 1]: /images/20210813/095538173d0c4a28a429d7e8853e870b.png
[format_png 2]: /images/20210813/55b6ca13b8e3435f9a948b6397d5ffc4.png
[format_png 3]: /images/20210813/7d4fc8351dd44238a96574a877c4dfed.png
[format_png 4]: /images/20210813/f5264b4a80204980949b69dace5d8404.png
[format_png 5]: /images/20210813/d2e98c3bb9eb4b66955aff494da310cc.png
[format_png 6]: /images/20210813/9b1c328b7a594cdd9c6a0a8a00ee7e56.png
[format_png 7]: /images/20210813/252ae38d4f154ff6903807c455d7f910.png
[format_png 8]: /images/20210813/6775a6e2927a444ba34a0fa14501b0ee.png
[format_png 9]: /images/20210813/e524980de76b4ac0acb7ed2d27a78fbd.png
[format_png 10]: /images/20210813/cef76c982db74187833d39f9bb3c5eb9.png