Avoid re-rendering the template in Vue 3 with pinia when changing state values

I am utilizing Vue3 and Pinia for state management.

Here is an excerpt from my Pinia file:

export const useCounterStore = defineStore ({
  id: 'statusData', 
  state: () => ({
    test1: 25, 
    test2: 75
  })
})

As for the template I am using:

<template>
  <div>
    {{ store.test1 }} {{ store.test2 }} 
  </div>
</template>

<script setup>
  import { storeToRefs } from 'pinia';
  import { useCounterStore } from '@/stores/statusData';
  const store = useCounterStore();

  const { test1, test2 } = storeToRefs(store);
</script>

Despite making manual changes in the 'statusData.js' file, the value remains unchanged in the template until the browser is reloaded.

If anyone has any insights on where the error might be originating from, please share your ideas.

Answer №1

Putting HMR aside, it's crucial to keep in mind that both the store and your templates reside on the server side. When you access a Vue page, Vue dynamically generates HTML content using the data in your store.

The reason why changes in templates are immediately visible without a refresh is because of HMR. Without HMR (I believe there is a way to disable it, but not entirely sure), you will encounter the same issue.

The key point here is: HMR is specifically enabled for templates and not for Pinia. Therefore, any changes made in Pinia will only be visible after refreshing the page, unless you enable HMR for Pinia as well.

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

"Troubleshoot: Inadequate performance of table search in node.js due

Embarking on a journey of learning here excites me. I have an insatiable appetite for new knowledge! Grateful in advance for any assistance! Presenting a concise Node.js JavaScript code snippet of 30 lines for a standard table search process. The "table" ...

"Implementing a click event on a dynamically generated element is triggering the event for all of its parent elements

I have a task to generate a dynamic table with data retrieved from the server. Each row in the table contains a tag that I am trying to link to a click event. The code snippet below demonstrates how the dynamic table is created: function ProcessResponse ...

Effectively monitoring coordinates on both the client and server sides

I'm currently in the process of developing a multiplayer game using websockets, node, and JavaScript. I need advice on the most effective approach to update client information and manage their coordinates on the server. The method I am using at the mo ...

PHP script integration with WHMCS

I've been attempting to add analytic.php into head.tpl in WHMCS, but I keep encountering an error. Analytic.php location: root/analytic.php Head.tpl location: root/whmcs/template/six/includes/head.tpl I read that WHMCS supports Smarty PHP, so I&apos ...

I'm interested in learning more about how to select or deselect all checkboxes

How can I uncheck the "all" checkbox when I uncheck another checkbox? $('#All').click(function () { var status = $(this).is(":checked"); if (status) { $.each($('input[name="checkbox"]'), function () { this. ...

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

Having trouble grasping the problem with the connection

While I have worked with this type of binding (using knockout.js) in the past without any issues, a new problem has come up today. Specifically: I have a complex view model that consists of "parts" based on a certain process parameter. Although the entire ...

Trouble rotating camera in THREE.JS?

How can I adjust my camera to look behind, with the center of the pong table being at x=0,z=0? I've tried changing the camera.lookAt settings but haven't had success. You can see the current camera view here. scene = new THREE.Scene(); scene ...

Error in Typescript: The type 'Element' does not have a property named 'contains'

Hey there, I'm currently listening for a focus event on an HTML dialog and attempting to validate if the currently focused element is part of my "dialog" class. Check out the code snippet below: $(document).ready(() => { document.addEventListe ...

Retrieve all populated fields on the second tier using Node.js and Mongoose

Do you have any insights to share on Node.js and mongoose? I've defined a mongoose schema and when I use findOne(), it returns a document with multiple elements under the "resource" key. Below is an example of how the document looks like: { "met ...

Is there a way in Vue to send view data to a template component without using bindings?

Is there a way to pass data in the template part to a component without using binding like :amount=amount? I have tried amount="amount" and amount=amount but it did not work. The reason I want to avoid v-bind is because I only want the value in ...

Expanding the size of a textarea using JavaScript

JavaScript: function adjustRows() { var value = document.getElementById("test1").value.length; if (value <= 18) { value.rows = 1; } else if (value > 18 && value < 36) { value.rows = 2; } else if (value > 36 && v ...

Creating a POST request in Rails 3

Is there a way to integrate web services in Rails 3 by sending POST parameters to an external URL? Typically, I utilize a command line method like the one below for posting: curl -X POST -u "v10REVkw:XuCqIhyCw" \ -H "Content-Type: application/json" & ...

The URL redirect is malfunctioning and prompting an error stating "No 'Access-Control-Allow-Origin' header"

Having trouble sending an Ajax request to a Node.js server from my application and encountering the following error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the ...

The Axios onDownloadProgress function on the GET method is only triggered one time, and the setTimeout within the callback is never executed

I'm currently working on displaying a progress bar while fetching data from the backend API. However, I've encountered a couple of issues that I'm struggling to resolve. Firstly, the progress bar jumps from 0 to 100 without showing any actua ...

Verify whether a web application is equipped with React, Angular, or Vue

Is there an easy way to identify the client-side libraries used by an application if they are minified or compressed? While examining all the JavaScript sent from the server to the client, it can be challenging to determine if one of the top three popular ...

How can I resolve the issue of encountering the "Modal dialog present: If you navigate away from this page, any unsaved changes will be lost" message while using Internet Explorer with

Here's the code snippet I'm working with. While it successfully removes the alert box, it throws an error in the console: Exception in thread "main" org.openqa.selenium.UnhandledAlertException: Modal dialog present: If you leave this page, any c ...

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

My website utilizes JavaScript to dynamically add content to div elements, like so: <script> //This content is generated by PHP var contents = [ "Item 1", "Item 2" ]; //Display the first item document.getElementById( "item" ).textCo ...

Guide on loading xml information from a web browser using JavaScript

I have been working on loading data from the browser using a URL and currently utilizing JavaScript to achieve this. window.onload = function() { // This is the specific URL I am attempting to load data from. // The XML fi ...

The functionality of Environment Variables only applies during the build process and does not affect the execution of npm run serve

After running into a problem with my environment variables, I discovered that they work smoothly with npm run build, but not with vue-cli-service serve --mode sandbox To troubleshoot, I referred to the Vue documentation here https://cli.vuejs.org/guide/c ...