vuex模块化后，调用commit,dispatch报错

路过的大哥们帮忙看看，谢谢

vuex 如下：

const layoutModule = {
  state:{
    userInfoId:{},
    userHeadImgFile:{},
    userHeadImg:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    personInfo:{
      username:'',
    },

  },

  getters:{
    getUserHeadImgFile(state){
      return state.userHeadImgFile;
    },
    getUserInfoId(state){
      return state.userInfoId;
    },
    getUserHeadImg(state){
      return state.userHeadImg;
    },
    getPersonalInfo(state){
      return state.personInfo;
    }
  },

  mutations:{
    setUserHeadImgFile(state,file){
      state.userHeadImgFile = file;
    },

    setUserInfoId(state,id){
      state.userInfoId = id;
    },

    setUserHeadImg(state,headImg){
      state.userHeadImg = headImg;
    },

    setPersonInfo(state,personInfo){
      state.personInfo = personInfo;
    }
  },

  actions:{
    uploadHeadImg({commit,state},file){
      var formData = new FormData();
      formData.append('file',file);
      formData.append('userInfoId',parseInt(state.userInfoId));
      Vue.http.post('/userInfo/uploadHeadImg',formData,
        {headers: { 'Content-Type': 'multipart/form-data' }},
      ).then(function(res){
        var result = res.data;
        if(result.code=="200"){
          commit("setUserHeadImgFile",file);
        }
      })
    },

  }
};


const store = new Vuex.Store({
  modules:{
    layout : layoutModule,
  }
});

export default store;

vue实例中调用：

this.$store.layout.commit("setUserInfoId", result.data.userInfoId);

报错：
Error in v-on handler: "TypeError: Cannot read property 'commit' of undefined" found in

应该怎么正确调用commit,dispatch,getters呢？谢谢！

this.$store.commit( 'layout/setUserInfoId',result.data.userInfoId )