Vuex中使用報錯unknown mutation type

依然很囧發表於2020-03-06
Vue

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')
複製程式碼

問題完美解決！

相關文章