discovering a new type of mutation through the use of Vuex

Vue Component

computed: {
   score () {
    this.$store.commit('fetchCoordinates');
    console.log(this.$store.getters.cordinate);
   }
}

store.js

export default {
  state: {
   lat:'ok',
  },
  getters:{
    cordinate(state){
    return state.lat
    }
  },  
  mutations: {
    fetchCoordinates(state){
     state.lat
    }
  },
  actions: {
  }
}

App.js

import StoreData from'./store.js';
Vue.use(Vuex);
const store = new Vuex.Store({StoreData});
new Vue({
  el: '#app',
  data: {},
  router: router,
   store,
})

New to using Vuex. I attempted to retrieve a value from Vuex but encountered an error message stating "[vuex] unknown mutation type". Could someone please help me identify what I may be missing?

Answer №1

To ensure your state property has a value, make sure to assign it like this:

computed: {
   score () {
    this.$store.commit('geolocation', 78);
    console.log(this.$store.getters.lat);
   }
}
  mutations: {
    geolocation(state, newLat){
     state.lat = newLat;
    }
  }

It's best practice to utilize mutations and actions within methods, and getters within computed properties when working with Vuex store.

The root cause of the issue

In your main.js, ensure you have

const store = new Vuex.Store(StoreData);
instead of erroneously including
const store = new Vuex.Store({StoreData});
by removing the unnecessary curly braces around StoreData.

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

Utilize AngularJS to Access Global JavaScript Variables

I recently encountered a situation where I needed to incorporate some dynamic functionality into a website I was building. This led me to AngularJS, which I decided to integrate into certain parts of the site rather than the entire thing. Within my JavaSc ...

Comparing Dates in Node.js using JavaScript and Sorting Arrays based on Date Values

Is JavaScript lacking a basic Date comparison feature similar to Python? Within my Node.js script, these lines are present: console.log(Date(2012,11,10) < Date(2012, 11, 9)) console.log(Date(2012,11,10) > Date(2012, 11, 9)) Surprisingly, both of t ...

including a content tag into an input field within a template

I'm experimenting with the new html5 template tag to create a versatile form that can be used in various situations without relying heavily on javascript. Check out this fiddle to see what I have so far http://jsfiddle.net/684uH/ My objective is to ...

The collapsed feature of the Bootstrap 4 Navbar is not functioning as

Recently, I delved into the world of Bootstrap 4 and decided to create a collapsing menu. Everything seemed to be working fine when I clicked the button and saw the content display perfectly. However, things took a turn for the worse when I tried to collap ...

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

How can I extract an array of objects from an array of arrays containing objects?

Here is the array I am currently working with: let findAllSegmentProjectMediaFilesXref = [ { it: 0, bt: 0, items: [ { mute: false, startPosition: 10, endPosition: 20, ...

Encountering a problem with the getJSON() function within the app.js file connected to a solidity

Currently, I am working on developing a simple dapp in Truffle. However, I encountered an error when using $.getJSON() function in my app.js file. Below is a snippet of my app.js: App ={ web3Provider: null, contracts: {}, init: function (){ return A ...

Displaying a JQuery notification when hovering over a link

I am having trouble getting an alert to pop up when I hover over a hyperlink using JQuery and Javascript. The hyperlink is inside an anchor within the main section of the HTML. Any assistance would be much appreciated. Here is my current code snippet: &l ...

Tips for showing user data following form submission to a SQL database using React JS

Hey everyone, I'm currently working on a project that involves user registration and login. Once the users complete these steps, they are required to fill out an additional form which is displayed below. After submitting this form, the data is stored ...

The persistent redirection issue in Node.js - Middleware

Currently, I am in the process of developing a middleware using node js and express. The main objective of this middleware is to redirect users to a login page if they are not authenticated. Although the redirection to the login page works as intended, th ...

What are the ways to activate an element in vue js?

Is there a way to modify the code so that the function triggers with just one click instead of two? export default { methods: { remove(){ $('.remove-me button').click( function() { removeItem(this); }); ...

Illumination scope for directional lights in three.js

In the world of three.js, calculating shadows for directional lights involves setting a range based on a bounding box that extends from the light source. This means that if I want to limit how far shadows are rendered, I need to adjust the bounding box geo ...

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

Not being a seasoned Javascript coder or very familiar with JSON, my approach may seem naive. Any recommendations for better solutions are appreciated. Below is the code I've written: <!DOCTYPE html> <html> <head> <script& ...

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

How can I pass props from a page to components in Next.js using getServerSideProps?

Struggling to fetch the coingecko-api for accessing live bitcoin prices. Trying to pass return props of getServerSideProps to my <CalculatorBuy /> component within the <Main /> component. Facing issues when importing async function in calcula ...

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

Alert: The lack of boundary in the multipart/form-data POST data has been detected in an unknown source on line

I am currently developing a file uploader that uploads an image when the input changes. Here is the code for my HTML form: <form method="post" enctype="multipart/form-data"> <input name="uploaded[]" type="file" id="file_upload"/> </for ...

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

I am implementing a code in the middleware.ts file to redirect users to specific pages based on their role. Here is the code snippet: import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { get ...

Challenges with creating an increment and decrement form component using Vue

I've been working on this for almost three days now. My goal is to create a reusable component in Vue that allows a passed value to be incremented and decremented with the click of a button, and then submitted in a form. Below is my code: Parent Com ...