【vueエラー】unknown action type:

こんにちは、shinoです。毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、vueのエラーを紹介していきます。簡単なものでも調べてみるとわかることも多くあるので一応備忘録としてどんどんエラーを載せておきます。

少しでもエラーの解決の手助けになればと思います。以前のエラーも少し関係があるので確認してみてもらうといいと思います。

今回の事象
エラー内容
エラー解説
エラー解決策
最後に

今回の事象

vueの簡易アプリを作成している際に、上記のエラーが表示されました。簡単なエラーですのでちゃんと確認してみるといいと思います。

エラー内容

エラーとしては、以下のものが出ています。

unknown action type:

1	unknown action type:

該当コードがこれになります。

const state = {
    name: null
};

const getters = {
    name: state => (state.name ? state.name : '')
}

const mutations = {
    setName(state, name) {
        state.name = name;
    }
};

const action = {
    login(context, name) {
        context.commit('setName', name);
    }
};

export default {
    state,
    getters,
    mutations,
    action
};

const state = {

};

const getters = {

}

const mutations = {

setName(state, name) {

state.name = name;

}

};

const action = {

context.commit('setName', name);

}

};

export default {

state,

getters,

mutations,

action

};

これをみてエラーしている理由が分かりますか？本当にしょうもないエラーです。

エラー解説

今回は、storeを利用しています。

actionが動かないというようなエラーです。特に構造は間違っていないように見えます。

エラー解決策

エラーの理由は、actionにsがついていないので動作しなくなっています。作成時のミスでした。

const state = {
    name: null
};

const getters = {
    name: state => (state.name ? state.name : '')
}

const mutations = {
    setName(state, name) {
        state.name = name;
    }
};

const actions = {
    login(context, name) {
        context.commit('setName', name);
    }
};

export default {
    state,
    getters,
    mutations,
    actions
};

const state = {

};

const getters = {

}

const mutations = {

setName(state, name) {

state.name = name;

}

};

const actions = {

context.commit('setName', name);

}

};

export default {

state,

getters,

mutations,

actions

};

actionsに変更すれば問題なく動作しました。

最後に

お疲れ様です。エラーは解決できたでしょうか？

他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。