Trying to define Vuex mutations like this:
export default {
props: {
store: String
},
methods: {
...mapMutations({
changeModel: `${this.store}/changeModel`
})
}
}
Encountering an error message:
An error occurred: Uncaught TypeError: Cannot read property 'store' of undefined
How can I properly incorporate props into the module mutation name?
I aim to map
this.$store.commit('form1/changeModel')form1 is specified by props.
If you're looking to utilize the Vuex helper mapMutations with a function that operates using this, it is indeed possible.
While there isn't an official documentation available for this feature, you can refer to the example provided in the Vuex unit test helpers.spec.js which demonstrates how it can be done.
const vm = new Vue({
store,
methods: mapMutations({
plus (commit, amount) {
commit('inc', amount + 1)
}
})
})
Furthermore, this method allows for passing parameters to mutations, which is often required in certain scenarios.
To implement this in your own code:
export default {
props: {
store: String
},
methods: {
...mapMutations({
changeModel(commit) { commit(`${this.store}/changeModel`) }
})
}
}
When used within your component, you simply call changeModel(), as mapMutations handles injecting the commit parameter automatically.
It's worth noting that while this approach may add complexity compared to a straightforward this.$store.commit() method, it could be beneficial if your requirements are more intricate than those covered in the example snippet.
It seems that binding this on mapActions is not possible in this case. However, you can still utilize $store.dispatch to call it.
methods: {
updateModel() {
this.$store.dispatch(`${this.store}/updateModel`);
}
}
While it may not be the exact solution you were seeking, its impact remains consistent. Since mutation is a variable parameter, it makes sense to include it as an input parameter in a function instead of modifying the mutation name directly. One possible approach could involve creating an action in the store like so:
changeModel ({dispatch, commit, rootGetters}, mutationName) {
commit(`${mutationName}/changeModel`, {}, {root: true})
})
This action can then be utilized in the component by passing the mutationName as an argument.
Here is my code snippet: function scammer(message) { return new Promise((resolve,reject)=>{ if(condition){ if (condition) { bot.KickMember(params).then((message)=>{ console.log("kicked"); ...
After conducting some research, it seems that Chrome has the necessary codecs to play MKV videos. However, I have yet to come across any information on how to select audio tracks in MKV and AVI files using Javascript/HTML5. Does anyone have any insight in ...
Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...
I'm attempting to relocate an element within another in order to enable a css :hover effect. <ul> <li id="menu-item"> //move into here </li> </ul> <div class="tomove">...</div> 'tomove' is set to dis ...
I am trying to send data from a form (including a file input and string input) via ajax to an ASP.NET Function. When sending only files, I use the following code: function readURL() { var input = document.getElementById("fileUpload"); var files ...
I'm currently working on an issue with saving updated functions using angularJS. I've managed to edit the data and update it on the database side, but the changes aren't reflecting on the frontend side unless I logout and login again. I need ...
Currently, I am working on an application using ReactJS and Material UI. Within this project, I have incorporated an Input component inside a FormControl component. My goal is to have the focus automatically set on the Input component whenever a user click ...
I am developing a service that will keep personal information about a specific user, which should only be accessible by the author and the intended recipient. I want to encrypt the data on the client-side and store the encrypted version on the server. Res ...
Imagine having a component called "wo" that receives a function as a parameter. export default class SomeComp extends Component { constructor(props) { super(props); } _someFunc = () => { return ... } render() { ...
Whenever I start my NodeJS server and enter localhost:8080, I encounter the mentioned error while the page is loading. The head section of my index.html file is provided below. It's puzzling to me why this error is happening, considering that my index ...
I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...
Looking at the following code: MainParentComponent.js let data = 0; function MainParentComponent() { function handleClick() { data++; } return (<> <button onClick={handleClick}>Increase</button> < ...
I'm having trouble with my AngularJS setup. The angular.min.js file is located in the js folder, following a code example from O'Reilly's book. However, for some reason it is not working on my computer. //controller.js function HelloCont ...
Is there a way to dynamically disable a transition animation in Vue based on a boolean value? Currently, the animation is enabled with the following code: <transition name="fadeUp"> <div v-if="elIsVisible"> <p>Foo Bar</p> ...
I'm struggling with the process of converting a string into a nested hash in JavaScript. Here is the string I want to convert: "{'btc_usd': {'price': 376.2, 'volume': 42812.69, 'change': -0.5},'btc_cn ...
All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...
I've been struggling with this issue for some time now. When researching the onclick JavaScript call, I noticed that sometimes it is written as onClick with a capital C, while other times it's simply onclick. The code I'm working on is part ...
On my webpage, I have a button labeled Submit that, when clicked, triggers an operation by calling an API. After the button is clicked, it should be disabled or changed to reflect that the operation has started. I am facing an issue where multiple browser ...
Struggling with an error while working on an ecommerce website using Next.js. The error message reads: error: API resolved without sending a response for /api/orders, this may result in stalled requests The error also indicates: API handler should not ...
I'm currently working on making HTTP calls in Angular and I want to trigger a different service function if an error occurs. The problem is, no matter what the original service call function returns, the promise always ends up being "undefined". Here& ...