解决vuex数据页面刷新后初始化操作

解决vuex数据在页面刷新之后初始化操作，可以通过localStorage、sessionStorage和路由守卫等方式来实现。

使用localStorage

可以通过在页面beforeunload事件中将vuex中的状态保存到localStorage中，在beforecreate时读取这个localStorage中的值进行vuex的初始化。具体实现如下：

// 保存到localStorage
window.addEventListener('beforeunload', () => {
  localStorage.setItem('vuex-state', JSON.stringify(store.state))
})

// 读取localStorage并初始化vuex
const state = localStorage.getItem('vuex-state')
if (state) {
  store.replaceState(JSON.parse(state))
} else {
  // 默认初始化vuex
}

使用sessionStorage

和localStorage类似，但是使用sessionStorage可以在浏览器关闭后清除掉保存的状态，不会占用过多的存储空间。具体实现如下：

// 保存到sessionStorage
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('vuex-state', JSON.stringify(store.state))
})

// 读取sessionStorage并初始化vuex
const state = sessionStorage.getItem('vuex-state')
if (state) {
  store.replaceState(JSON.parse(state))
} else {
  // 默认初始化vuex
}

使用路由守卫

可以通过在路由进入之前的守卫中来初始化vuex，例如在beforeEach中进行如下操作：

router.beforeEach((to, from, next) => {
  // 判断是否需要操作vuex的状态
  if (to.meta.requireAuth && !store.state.isLogin) {
    // 未登录的情况下，需要跳转到登录页面
    next({path: '/login'})
  } else {
    // 可以初始化vuex的状态
    next()
  }
})

在上例中，通过添加一个路由元信息requireAuth来判断当前页面是否需要登录，如果需要登录并且当前未登录，那么就跳转到登录页面；否则可以进行vuex状态的初始化操作。

以上就是解决vuex数据页面刷新后初始化操作的完整攻略，具体实现可以根据项目的需求来选择合适的方式。