[vuex] unknown mutation type: SET_USER_NAME,报错如下图和代码

Question

问题

可以获取state里的属性，有namespaced: true的时候，通过点击事件修改，就报错了

报错信息

vuex目录结构

src/store/module/user.js

const state = {
    shopName: 'taobao'
}
const getters = {

}

const mutations = {
    SET_SHOP_NAME(state, params) {
        state.shopName = params
    }
}

const actions = {

}
export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import user from './module/user'
import shop from './module/shop'

// import saveInLocal from './plugin/saveInLocal'

Vue.use(Vuex)

export default new Vuex.Store({
    strict: false,
    state,
    getters,
    mutations,
    actions,
    modules: {
        user,
        shop
    }
})

页面src/views/store.vue

<template>
  <div>
      <p>shopName:{{shopName}}</p>
      <button @click="updateShopName">updateShopName</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'store',

  computed: {
    ...mapState({
      'shopName': state => state.shop.shopName
    })
  },
  methods: {
    ...mapMutations([
      'SET_SHOP_NAME'
    ]),
    updateShopName () {
      this.SET_SHOP_NAME({
        shopName: 'weixin'
      })
    }
  }
}
</script>

Answer 1

启用模块化后调用需要添加相应模块名作为前缀。

...mapMutations({
      SET_SHOP_NAME: 'user/SET_SHOP_NAME'
}),