vuex unknown action type: RawHTML in a VueJS using typescript application

Question

I am getting a '[vuex] unknown action type: RawHTML' when trying to dispatch an action on a component. Those errors are usually caused by not correctly namespaced modules, but I am not using modules here.

store/index.ts

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const SETRAWHTML = ''

    const store =  new Vuex.Store({
    state: {
       raw:''
       },
    mutations: {
    [SETRAWHTML](state,str){
     state.raw=str
    },
    },
    actions: {
    RawHtml({commit}, str) {
      commit(SETRAWHTML, str)
    },
    },
    getters: {
    getRawHTML (state) {
      return state.raw
    }
    },
   })

    export default store;

main.ts

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'

    Vue.config.productionTip = false

    new Vue({
        router,
        store,
    render: h => h(App)
    }).$mount('#app')

my component

    click(){
    store.dispatch('RawHTML', this.rawHTML)
}

Thanks in advance

Answer 1

The name of actions is case-sensitive and you should dispatch the action with the same name as it's defined in the store, RawHTML and RawHtml don't refer to the same action, so you should respect the case and write the action dispatch as follows :

click(){
    store.dispatch('RawHtml', this.rawHTML)
}