mounted阶段拿不到vuex中的数据,刷新页面vuex中的数据没了

1刷新页面vuex中的数据没了

解决方法1

把数据存放到localStorage中和vuex中,当刷新页面时候,再次从localStorage中获取存放到vuex中,在所有页面都共用的组件,比如header.vue,通过localStorage中的user_id去请求获取用户信息user_info存放到vuex中可以省去很多麻烦,毕竟是所有页面共用的组件,就不用每个页面都去请求。

当然,这种操作只能保证页面能渲染到vuex中的数据,并不能保证在刷新页面情况下,mounted阶段能拿到vuex中的数据

// 保存登录用户 mutations中的操作
SAVE_LOGIN_USER (state, user) {
  state.login = true
  state.loginUser = user
  saveStore('user_id', state.loginUser.user_id)
},
 // 获取用户信息存入vuex中 mutations中的操作
GET_USER_INFO(state, user){
  if (state.loginUser && (state.loginUser.username !== user.username)) {
    return
  }
  if (!state.login) {
    return
  }
  state.loginUser = {...user}
},
actions: {
    // 获取用户信息  actions中的操作
  GET_USER(context) {
     getUser().then(({ data }) => {
       context.commit('GET_USER_INFO', data)
     })
   }
  },
 mounted () {    //header.vue的共用组件去请求再次获取数据
  this.GET_USER()
 }

解决方法2:

再次发送请求获取同样的数据

2 刷新页面情况下,mounted拿不到vuex中的数据

添加watch监视store中的数据,比如,这样在mounted阶段,刷新页面情况下就可以获取到store中的loginUser

 computed: {
    ...mapState(['loginUser']),
 },
 watch: {
    loginUser: function (val) {
      this.initData()
    }
 },
 methods: {
	 initData() {
	      // 获取收货地址
	      if(this.loginUser && this.loginUser.user_id) {
	        goodsAddress(this.loginUser.user_id).then(res => {
	          this.address = res.data
	        })
	      }
     }
}
  

你可能感兴趣的:(vue)