Solve the problem that vuex changed the value of state but the page was not updated

  • 2021-09-20 19:13:45
  • OfStack

When the state attribute is defined as obj, it sometimes occurs that after other pages modify the state value, other pages are not updated synchronously.

At this time, you need to convert 1. JSON. parse (JSON. stringify (obj)

this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)))

Additional knowledge: vuex writing of 1 "error": vuex refreshes data but does not refresh view

This is an awkward question. Let me guess if your code reads like this:


<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme"> Click on me </button>
 <span>{{countnumber}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
  return {
  countnumber: this.$store.state.count,
  }
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

So congratulations, no matter how plain you are, it will be 0. But if you write it like this, it is correct:


<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme"> Click on me </button>
 <span>{{$store.state.count}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

The difference is that you are directly related to the interface. Why? I don't know, after all, it is someone else's framework.


Related articles: