美文网首页
vuex-命名空间namespaced:true

vuex-命名空间namespaced:true

作者: tutututudou | 来源:发表于2022-06-29 01:19 被阅读0次

将state写成模块化

//这是学校模块
const xue= {
   
   actions:{},
   mutations:{},
   state:{},
   getters:{}

}
//这学生模块
const student = {
   
   actions:{},
   mutations:{},
   state:{},
   getters:{}

}

使用这个两个模块

export default new Vuex.Store({
 modules:{
    a:xue,
    b:student
 }
})

使用者两个模块

  ...mapState('a',['sum','shool','addr','name','age']),
 ...mapGetters('a',['bigSum'])
...mapMutations('a',{jia:'JIA',jian:'JIAN'}),
...mapActions('a',{oddJia:'oddJia',wait:'wait'})

使用这样的简写方式,要添加namespaced:true

const xue= {
   namespaced: true,
   actions:{},
   mutations:{},
   state:{},
   getters:{}

}

原来的写法

  he(){
     return this.$store.state.sum
   },
   xuexiao(){
     return this.$store.state.shool
   },
   dizhi(){
     return this.$store.state.addr
   },
   mingzi(){
     return this.$store.state.name
   },
   nianling(){
     return this.$store.state.age
   },
  bigSum(){
     return this.$store.getters.bigSum
   },

添加多模块后的写法

 computed:{
   he(){
     return this.$store.state.a.sum
   },
   xuexiao(){
     return this.$store.state.a.shool
   },
   dizhi(){
     return this.$store.state.a.addr
   },
   mingzi(){
     return this.$store.state.a.name
   },
   nianling(){
     return this.$store.state.a.age
   },
bigSum(){
     return this.$store.getters['a/bigSum']
   },
}
methods:{
 jia(){
  this.$store.commit('a/JIA',this.n)
 },
 jian(){
  this.$store.commit('a/JIAN',this.n)
 },
 oddJia(){
  this.$store.dispatch('a/oddJia',this.n)
 },
 wait(){
  this.$store.dispatch('a/wait',this.n)
 },

}

相关文章

网友评论

      本文标题:vuex-命名空间namespaced:true

      本文链接:https://www.haomeiwen.com/subject/mtfsdrtx.html