为什么根据vuex里面的数据绑定的class会在页面刷新之后失效？o_0?!

Question

list.vue

<nuxt-link to='/personal/list/center' >
    <p :class="page.side==1?'active':''">个人中心<i>认证状态</i><b>未认证 ></b></p>
</nuxt-link>

在嵌套路由组件里

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

设置相应vuex 里面side的状态
这个状态在页面刷新之后没有丢失，已经存在localstorage里面了
可是为什么class还是没有绑定上？？
跳转的时候一切正常，只有刷新页面的时候会出问题？

vuex 里面的数据并没有丢失，
无奈只能这样写。。。

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

Answer 1

楼主刷新页面的时候，要从 localstorage 拿的。不然的话，从 vuex 拿不到的

Answer 2

1、vuex的数据是存在内存中的不是持久性的，当浏览器刷新的时候页面重新渲染，vuex的数据也会初始化到默认状态。
2、页面刷新的时候，需要在nuxt的相应生命周期里面从新设置 slide 的值，这样才会触发更新。

Answer 3

刷新页面的时候，vuex里面的状态都初始化了。如果说存在localStorage里面了，那楼主把page.side打印出来看看，估计是存储的时候有问题

Answer 4

state中side

//state中的side从localStorage中取
side:() => {
    return localStorage.side || ''
}

mutations中设置side

set_side(state, side) {
    state.side = side
    localStorage.side = side//设置side的时候localStorage也设置存一下，这样刷新的时候获取的就是localStorage存的值
}

使用

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)
},