Vue面试题47：页面刷新后vuex的state数据丢失怎么解决？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析

  • 这是一道应用题目，很容易想到使用1ocalStorage或数据库存储还原状态；但是如何优雅编写代码还是能体现认知水平；

• 体验

• // 可以从`localStorage`中获取作为状态初始值：
  state() {
    return {
      count: localStorage.getItem("count") || 0,
    }
  }
  
  // 业务代码中，提交修改状态同时保存最新值：虽说实现了，但是每次还要手动刷新localStorage不太优雅：
  store.commit("increment")
  localStorage.setItem("count", store.state.count)
  
  // 通常进行一步封装，将操作内聚在store中
  // utils/useCount.js
  export function getCount() {
    return localStorage.getItem("count")
  }
  
  export function setCount(val) {
    localStorage.setItem("count", val)
  }
  
  //store/index.js
  state() {
    return {
      count: getCount() || 0,
    }
  },
  mutations: {
    increment(state) {
      state.count++
      setCount(state.count)
    },
  },
  

• 思路

  • 问颗描述；
  • 解决方法；
  • 谈个人理解；
  • 三方库原理探讨；

• 回答范例

  • vuex只是在内存保存状态，刷新页面后状态必然会丢失，如果想要持久化就要把状态保存起来；
  • localStorage就很合适，提交mutation的时候同时存入localStorage，store中把值取出作为state的初始值即可；
  • 但这里有两个问题，首先不是所有状态都需要持久化，如果需要保存的状态很多，编写的代码就不够优雅；此外每个提交的地方都要单独做保存处理；这里就可以利用vuex提供的subscribe方法做提交时的统一的处理；甚至可以封装一个vuex插件以便复用；
  • 类似的插件有vuex-persist、vuex-persistedstate，内部的实现就是通过订阅mutation变化做统一处理，通过插件的选项控制哪些状态需要持久化；

• 扩展：subscribe使用

• store.subscribe(({ type, payload }, state) => {
    if (type === "increment") {
      localStorage.setItem("count", state.count)
    }
  })