vue学习-模块化

vuex细分模块modules

1、新建模块中不使用namespaced：true时

mall.js

export default{
    state:{
        mallname:"tataimall"
    },
    mutations:{
        setMallname(state,payload){
            state.mallname=payload;
        }
    }
}

在store的index.js中需要进行以下操作

import forum from './forum'
//vuex细分模块
  modules: {
    mall
  }

此时调用的组件中：

<h1>{{mall.mallname}}</h1>
     <button @click='setMallname("sweetmall")'>点击换名</button>
 <script>
 methods:{
       ...mapActions(['getSome']),
       ...mapMutations(['addAge','setMallname']),
     /*  addAge:function(){
           this.$store.commit('addAge',5)
       }*/
   },
   computed:{
       ...mapState(['username','age','infolist','mall']),
       ...mapGetters(['newage']),
       
 </script>

结果：

2、新建模块中使用namespaced：true时

forum.js

export default{
    namespaced:true,
    state:{
        forumname:"sweet forum"
    },
    mutations:{
        setForumname(state,payload){
            state.forumname=payload;
        }
    }
}

index.js中

import forum from './forum'
  //vuex细分模块
  modules: {
    mall,
    forum
  }

组件中

<h1>{{forumname}}</h1>
     <button @click='setForumname("hahaha forum")'>点击换名</button>
 <script>
 methods:{
 methods:{
       ...mapActions(['getSome']),
       ...mapMutations(['addAge','setMallname']),
        ...mapMutations('forum',['setForumname'])
     /*  addAge:function(){
           this.$store.commit('addAge',5)
       }*/
   },
   computed:{
       ...mapState(['username','age','infolist','mall']),
       ...mapGetters(['newage']),
       ...mapState('forum',['forumname'])   //可以通过制定模块名选择模块中的属性
   }
       
 </script>

结果：