Unidentified action type in Vuex: RawHTML being used in a TypeScript-powered VueJS application

Whenever I try to dispatch an action on a component, I keep getting the error '[vuex] unknown action type: RawHTML'. This issue is usually related to incorrectly namespaced modules, but in this case, I am not using any modules.

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)
}

I appreciate any help in resolving this issue. Thank you.

Answer №1

It is crucial to note that the name of actions is case-sensitive. When dispatching actions, be sure to use the exact same name as it appears in the store. For example, RawHTML and RawHtml are not interchangeable when referring to actions. Therefore, it is important to respect the case sensitivity by writing the action dispatch like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Excluding unnecessary TypeScript files in Angular 9

After upgrading from Angular 7 to Angular 9, I am encountering numerous errors like the one below. WARNING in C:\Users\DEV-SYS\Documents\GitHub\Angular-7\src\environments\environment.prod.ts is part of the Typ ...

Utilizing a single v-model for several elements

I am having an issue with a dropdown that is set to v-model="compose.Recipient". Based on the value of "compose.Recipient", I need another dropdown to appear as shown below: <div class="form-group" v-if="compose.Recipient==2" title="Select Class"> ...

Ensuring type safety in React using TypeScript

Within the code snippet below, I have specified that setLocale should be passed a value of type Locale through LocaleContextValue. However, why does the setLocale function not throw an error if no value is provided as a parameter? Even when I change it t ...

How to effectively test @input using Jasmine: Anticipated Object did not match undefined

Having trouble with this error. There seems to be something missing but can't pinpoint what it is. The task at hand is simple: just test this basic component. Let's take a look: import { Component, OnInit, Input } from '@angular ...

Renaming form elements using JQuery's .load method

This is a page named A.html <form name=form> <input type=text id = txtA> </form> When I use jQuery to load it into B.html, it loads multiple times. <form name=form> <input type=text id = txtA> </form> <form name=f ...

Struggling with integrating an EJS form to work with a MONGODB database

I'm struggling to wrap my head around how to connect the front end in ejs and submit a form that sends information to the back end. At the moment, I have a file called server.js that renders all my ejs pages and connects to the database. Here is the ...

Convert HEX to RGB color format

Is it possible to utilize jQuery to call a function that converts a HEX value to RGB and then insert the HTML? Here is the JavaScript code: function convertHexToRGB( color ) { var r, g, b; if ( color.charAt(0) == '#' ) { color = ...

"Ensure that all necessary fonts and assets are included in the development of your Vue component

At the moment, I am utilizing vue-cli-service build --target lib --name myLib [entry] to compile Vue into a component library for integration into other projects. Nevertheless, it only produces four files which are: dist/myLib.umd.min.js dist/myLib.umd. ...

Revise the content of HTML5 page before displaying

Recently, I created a simple HTML5 page that requires the ability to support multiple languages. To accomplish this, I have set up the language control by loading a JSON file into memory when the page loads (in the HEAD section) and then using a jQuery com ...

Show vimeo videos using ng-repeat angularjs and videojs player

I need help trying to showcase videos using angularJS. Below is the code I have: <span class="video-inner" ng-repeat="item in items"> <video id="video-{{item.id}}" class="video-js vjs-default-skin" controls preload="au ...

Preventing internal div movement within the outer div border using JavaScript Animation

Greetings to all the brilliant minds on Stack Overflow! I have been given a school assignment that requires me to create a basic animation using CSS and JavaScript. I set up a large outer div and added a smaller div inside it. Using JavaScript, I manag ...

NPM installation issues are only occurring on one computer, not the other

After spending a few months working on my Angular application, I encountered an issue when trying to run it on my laptop. Everything was properly installed, and I attempted to install the necessary node_modules by running npm i. However, I received the fol ...

Encountering issues with Vue-Router functionality after refreshing page in Laravel-6

Can someone explain what is going on here? Whenever I refresh my web browser, it no longer recognizes the route. ...

Keyboard shortcuts for navigating Ruby on Rails

Is there a way to implement keyboard shortcuts with Ruby on Rails for my website? I want users to be able to navigate the site using keyboard commands rather than clicking buttons or links. Can anyone provide guidance on how to achieve this? ...

Encountering an issue when transferring data between controllers utilizing a demo service

During my journey of learning AngularJS, I decided to create a small app that would allow data to be passed between two controllers using services. Below is the code snippet that showcases how I achieved this: The Controller Code <!DOCTYPE html> &l ...

Establish a connection between a variable and the selected value of Mat-select using a form

Within my TypeScript code, there exists a variable named type whose value is provided by its parent component. This type value is essentially a string that has the possibility of being empty upon being received from the parent component. Additionally, in t ...

`The ng-binding directive seems to be malfunctioning while ng-model is functioning properly

Currently, I am in the process of learning how to utilize Angular (1.3.10). My objective is to create two input fields that will specify the suit and value for a hand of playing cards. In my attempts to achieve this, I have encountered an issue. When I man ...

Tips for managing an array of observable items

In my current project, I am working with an Angular application that receives a collection from Firebase (Observable<any[]>). For each element in this collection, I need to create a new object by combining the original value with information from ano ...

Having trouble with jQuery attribute selectors? Specifically, when trying to use dynamic attribute

This is the code I am working with $("a[href=$.jqURL.url()]").hide(); $.jqURL.url() fetches the current page URL. Unfortunately, this code is not functioning as expected. Is there a way to dynamically select elements? ...

"Troubleshoot: Issue with React class component's setState not correctly updating

Hey there! I could really use some help with the issue I'm facing: So, I have a React class component that extends React.Component and it has a method that allows me to set its state whenever I want. I understand that passing a prop to the component ...