Vuex使用过程中报错总结

使用Vuex的module时，比如创建一个存储person的模块时，代码如下：

    // person.js
    const state = {
        person: {
            name: '', // 姓名
            age: 0 // 年龄
        }
    }
    
    const getters = {
        getCurrentObj: state => {
            return state.person
        }
    }
    
    const mutations = {
        setCurrentPerson: (state, resp) => {
            state.person = resp
        },
    
        changePersonAge: (state, age) => {
            state.person.age = age
        }
    }
    
    const actions = {
        changeSelPersonAge({commit}, resp) {
            commit('changePersonAge', resp)
        }
    }
    
    export default {
        namespaced: true,
        state,
        getters,
        mutations,
        actions
    }

Store中的代码如下

    // index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import person from './modules/person'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        modules: {
            person
        }
    })

vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，当使用时，用到了map辅助函数后，报错：unknown mutation type。

why？

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为命名空间模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

解决办法

1、基本方法：

    this.$store.state.moduleA.countA

2、map辅助方法：

    ...mapState({
            count:state=>state.moduleB.countB
        })

3、严格模式下使用createNamespacedHelpers

    import { createNamespacedHelpers } from 'vuex'
    const { mapMutations, mapActions } = createNamespacedHelpers('person')

Vuex中使用报错unknown mutation type