Why does the class bound by the data in vuex expire after the page is refreshed? O_0?!

list.vue

<nuxt-link to="/personal/list/center" >
    <p :class="page.side==1?"active":"""><i></i><b> ></b>
</nuxt-link>

in nested routing components

beforeRouteUpdate(to, from, next) {
      this.set_side(3)
      next()
    },
    mounted(){
        this.set_side(3)
    },

set the status of the side in the corresponding vuex
this state is not lost after the page refresh, it already exists in the localstorage
, but why is the class still not bound?
everything is fine when you jump, but something goes wrong when you refresh the page.

the data in vuex is not lost.
has no choice but to write this way.

if(that.page.side==1){
                document.querySelectorAll(".left a p")[0].classList.add("active")
            }

Javascript css vue.js nuxt.js

Apr.24,2022

when the landlord refreshes the page, he should take it from localstorage . Otherwise,

1, which cannot be obtained from vuex , the data of vuex is stored in memory, not persistent. When the browser refreshes, the page is re-rendered, and the data of vuex is initialized to the default state.
2. When the page is refreshed, the value of slide needs to be set again in the corresponding life cycle of the nuxt, so that the update will be triggered.

when the page is refreshed, the state in vuex is initialized. If it exists in the localStorage, then the landlord prints out the page.side to have a look. It is estimated that there is a problem with the storage

state side

//statesidelocalStorage
side:() => {
    return localStorage.side || ''
}

mutations set side

set_side(state, side) {
    state.side = side
    localStorage.side = side//sidelocalStoragelocalStorage
}

use

import { mapGetters,mapMutations } from vuex
computed: {
    ...mapGetters(['side'])
},
methods: {
    ...mapMutations['set_side']
},
beforeRouteUpdate(to, from, next) {
  this.set_side(3)
  next()
},
mounted(){
    this.set_side(3)
},

Previous: How to make the routing name not appear after the domain name by vue

Next: In Vue < script >, some methods under methods have direct method names () and some are method names: function (). What's the difference?