Using 'this' to access state in the Vuex Store

Currently delving into Vuex and studying this section of the official Vue documentation. I'm curious as to why one would access state with an argument instead of simply using this? I experimented with using this and found that it still worked.

Vue Sample

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

My Example

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment () {
      this.count++;
    }
  }
})

Answer №1

When working with the Vuex store instance, it's important to note that it is not your typical object with its own `this`. Think of it as a black box that handles input and output. It takes the state as a parameter and then updates the state based on your mutations. For example, in the following code snippet:

 mutations: {
    increment () {
      this.count++;
    }
  }

The use of `this` refers to the global `window` object.

As mentioned by @Spinx, in Vuex version 3 and later, `this` actually refers to the Vuex instance. @Matt also brings up a good point in saying:

When unsure about how your function is bound, it's best to use explicit parameters. -Matt

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

Exploring the World of AJAX with CodeIgniter

I've been on the hunt for a solid working example of using AJAX with Codeigniter, but most resources I've found are outdated. As an AJAX beginner, I'm struggling to find up-to-date tutorials. What I'm aiming for is an input form on a w ...

A loop in JavaScript/TypeScript that runs precisely once every minute

Here is a snippet of my code: async run(minutesToRun: number): Promise<void> { await authenticate(); await this.stock.fillArray(); await subscribeToInstrument(this, this.orderBookId); await subscribeToOrderbook(this, this.orderBookId ...

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

The deletion of Webpack Clean- /public/js has been successfully completed

I am utilizing the clean-webpack-plugin to empty the contents of my public/js directory. https://www.npmjs.com/package/clean-webpack-plugin Despite trying various methods, I keep encountering the message /public/js has been removed plugins: [ new CleanW ...

Troubleshooting problems with the guildMemberAdd event handler

As I continue on my journey with discord.js v12, I've encountered yet another issue with an event handler. While most events have been working fine so far, such as message or ready, I am currently facing a challenge with guildMemberAdd event. My goal ...

Show validation message using Bootstrap near the submit button

My form consists of around 40 questions, some required and some optional. Upon clicking "submit," I utilize Bootstrap's form-validation.js to verify the form before submission, which works seamlessly. However, due to the length of the form, when a us ...

Identifying and detecting Label IDs when clicked using the for tag

I am facing an issue with labels and input fields in my code. I have multiple labels that trigger the same input field, but I want to know which specific label triggered the input field. <label id="label1" for="input1">Document1</label> <la ...

What steps are needed to set up my Express server so that it can render all my content, rather than just my HTML file?

I need help setting up a server for my project using Express. Here is the structure of my file directory: root-directory ├── public │ ├── css │ │ └── styles.css │ ├── images │ │ └── img1.png | | └ ...

Creating fixed values in HTML

I need to maintain consistency in the headings of multiple tables spread across 3 HTML pages. The heading structure is as follows: <thead> <tr> <th>MyHeading</th> </tr> </thead> My goal is to store the string MyHeadin ...

Showing a Remote Image on the Screen

I have a 16x16 grid of thumbnail images and I'm trying to implement a feature where clicking on an image displays the full-sized version with a dimmed background. The full-sized image should appear to float above the background. I don't want to ...

When working with Bootstrap-Vue, what is the best way to stop a b-dropdown from closing when a nested b-input component is clicked on?

I'm struggling to grasp the concept of Vue's Event Modifiers. The documentation suggests that adding this simple code should do the trick: <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"& ...

Canvas displaying inaccurately (unsteady)

While working on a simple HTML5/javascript game, I encountered an unusual issue with the canvas drawings - they seem to be unstable. I have a map that needs to be drawn in a specific way: The background consists of 2 layers: the ocean and the islands. Th ...

Create a random word from a single string within the data in Nuxt.js

I am in need of assistance. In my Vue Nuxtjs project, I am fetching random words generated from my backend Laravel application through an API response. I need to generate multiple random words from a single string value in the data obtained from my Axios r ...

Error alert: Unable to find the specified word

Having trouble writing a word to the database due to an error: ReferenceError: Patikrinta is not defined. Below is my ajax script for sending data to a PHP file, and then the PHP script itself if needed. Haven't found a solution on Stack Overflow. $s ...

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

using VueJS, learn how to dynamically apply text to a data variable based on certain props

I'm facing an issue with conditional value assignment to the data variable based on props. The ternary operator is causing errors in my code. Here's a snippet for reference: <template> <div class="absolute left-3 top-1/2"> ...

Search results in Google Maps may sometimes be missing when adjusting the radius

I've been working on integrating the Google Maps Place Search API to find nearby mosques. Everything is functioning smoothly, but I've encountered a problem when I increase the radius parameter. Some results are missing compared to the previous s ...

When a value is entered into an input in Vue, automatically transition to the next field

As a newcomer to Vue, this is my first project using the framework. I have three input fields that start with empty values. Is there a way to automatically move or make the second input field selectable when the first input field contains more than 5 chara ...

Having Trouble with Axios PUT Request in React and Redux

I'm having trouble making a PUT request to the server. I understand that for a PUT request, you need an identifier (e.g id) for the resource and the payload to update with. This is where I'm running into difficulties. Within my form, I have thes ...