Is it common practice in the Vue.js (Nuxt.js) development community to send data to the server from a VUEX storage using code similar to this example?
setTrackingData (state, value) {
state.to_the_final_destination = value.to_the_final_destination;
const res = axios.get("https://seo-gmbh.eu/invest/input.php");
}
Are these approaches generally accepted by developers?
When using Vuejs with Vuex as a centralized store, requests can be written in the actions section of the Vuex module. For guidance on organizing your Vuex store, refer to this link
Define the state and getters in the Vuex module
const state = {
...
};
const getters = {
...
};
In the actions object, include the code for making server requests
const actions = {
async setTrackData({ commit }, value) {
try {
const res = await axios.get("https://seo-gmbh.eu/invest/input.php");
commit("SET_TO_THE_FINAL_DESTINATION", value);
...
} catch (error) {
...
}
},
};
When changing the state of Vuex through actions, commit the changes using the mutation function from the mutations object.
const mutations = {
/* sets the data to the state value from the state object */
SET_TO_FINAL_DESTINATION(state, data) {
...
},
};
To access the Vuex store actions and getters, import the getters in the computed section and the actions at the beginning of the methods object. Here's an example,
export default Vue.component('ABC', {
...
computed: {
...mapGetters([
/* import the getters here */
'getSomeState',
]),
},
...
methods: {
...mapActions([
/* import the actions here */
'setTrackData',
]),
...
}
}
For additional structuring of API calls in a Vuejs project, check out this link
I am in need of creating Xpath for links based on contained text. I have devised the following code to achieve this, however, a scenario arises when there are three links named 'Entity', 'Entity Type', and 'Entity Group'. If I ...
Is there a way to access the parent scope from a partial using #each in Handlebars? Main template: (out of each = {{index}})<br> {{#each someItem}} (in each, but not on partial = {{../index}}) {{>part}} {{/each}} Partial: <div class="part ...
I've configured the checkboxes as shown below: <label v-for="service in team.services"> <input type="checkbox" v-model="form.services" :id="service.name" :value="service.id"/> </label> Although they are displayed correctly, the ...
Take a look at my file structure below -shared --foo.ts -web-ui (nuxt project) --pages --index.vue --index.ts --tsconfig.json This is the tsconfig for my nuxt setup. { // https://v3.nuxtjs.org/concepts/typescript "exte ...
I have integrated React context to access the login function and error from the context provider file for logging into the firebase database. I am trying to display any thrown errors in the app during the login process. However, I encountered an issue whe ...
I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...
I am looking to enhance my app by dynamically displaying pages based on a user's type and role properties. Currently, I am using a simple switch statement that determines the view based on the user's type, like this: switch(type) { case ' ...
I've set up a CI pipeline using Github Action/Workflows to run Cypress Automated tests, but I'm facing some issues with running my dev server. Below is my pipeline: name: Nuxt CI Pipeline on: push: branches: [ CI-pipeline ] # pull_reques ...
Currently, I am utilizing this template If you scroll down to the WORK section, you will find the portfolio section which is filterable. The default selected option is "ALL," displaying all items. However, I would like to remove this and activate a diffe ...
Within my web worker script, I am utilizing the following code: self.addEventListener('message', function(e){ try { var xhr=new XMLHttpRequest() for(var i = 0; i < e.data.urls.length;i++){ xhr.open('GET&apos ...
I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...
Whenever I attempt to inject 'ngAnimate' into my app, I encounter issues with instantiation. Here is the code snippet in question: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanit ...
When viewed from the back, the side is hidden as desired, but I am struggling to determine if it is visible from the renderer or camera. new THREE.MeshBasicMaterial({ map: new, THREE.TextureLoader().load('image.jpg'), side: THREE. ...
I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...
My window size isn't working properly, despite attempting the following code: Javascript var game; function game() { this.canvas = document.getElementById('canvas'); this.canvasWidth = window.innerWidth; this.canvasHeight = wi ...
I am attempting to initialize the MaterializeCSS framework without the use of jQuery in a VueJS project that was set up using npm (vue init webpack projectname) Starting from version 1.0.0-rc.2, Materialize now offers support for its own initialization wi ...
Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...
I have been working on a Chrome extension where I use a "for" loop to change the display style of elements named "mode" to none, except for one which should be displayed at the end of the loop. However, whenever I click on the button to activate it, my tab ...
Despite my struggles, including purchasing a course on testing Vitest in Vue 3 on Udemy, nothing seemed to work. However, I finally found a solution that might be helpful for others facing the same issue. ...
I am currently tackling an exercise for a Bootcamp, and the function I am using is not yielding the desired outcome. The objective is to query the database with a first name or a part of a first name. While I can successfully execute the DB query and retri ...