// store里的數(shù)據(jù)就像斷電后的冰箱
state: {
  cartItems: []  // 刷新后：空！??
}

// 本地存儲(chǔ)無(wú)法使用
localStorage.getItem('user') // 返回null

actions: {
  async fetchUser({ commit }) {
    const user = await 我.調(diào)接口() // 如果刷新頁(yè)面...
    commit('SET_USER', user) // 可能永遠(yuǎn)執(zhí)行不到！
  }
}

// 服務(wù)端渲染時(shí)，客戶(hù)端初始化狀態(tài)不匹配
window.__INITIAL_STATE__ = {...} // 傳輸過(guò)程中丟失

// store初始化時(shí)讀取
const user = JSON.parse(localStorage.getItem('user') || 'null')

const store = new Vuex.Store({
  state: { user },
  plugins: [
    store => {
      // 狀態(tài)變化時(shí)自動(dòng)保存
      store.subscribe((mutation, state) => {
        localStorage.setItem('user', JSON.stringify(state.user))
      })
    }
  ]
})

npm install vuex-persistedstate

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: ['user', 'cart'] // 只持久化指定模塊
    })
  ]
})

// 使用sessionStorage替代（標(biāo)簽頁(yè)關(guān)閉時(shí)清除）
createPersistedState({
  storage: window.sessionStorage
})

let saveTimer
store.subscribe((_, state) => {
  clearTimeout(saveTimer)
  saveTimer = setTimeout(() => {
    localStorage.setItem('store', JSON.stringify(state))
  }, 1000) // 1秒防抖
})

// 服務(wù)端
context.state = store.state

// 客戶(hù)端
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

// store/modules/user.js
export default {
  state: () => ({
    token: null,
    profile: null
  }),
  mutations: {
    LOGIN(state, { token, profile }) {
      state.token = token
      state.profile = profile
      // 同步保存到本地存儲(chǔ)
      localStorage.setItem('auth', JSON.stringify({ token, profile }))
    }
  },
  actions: {
    initAuth({ commit }) {
      const auth = JSON.parse(localStorage.getItem('auth'))
      if (auth) commit('LOGIN', auth)
    }
  }
}

// store/plugins/cartPersistence.js
export default store => {
  // 初始化時(shí)讀取
  const savedCart = localStorage.getItem('cart')
  if (savedCart) {
    store.commit('cart/RESTORE_CART', JSON.parse(savedCart))
  }

  // 監(jiān)聽(tīng)變化
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('cart/')) {
      localStorage.setItem('cart', JSON.stringify(state.cart.items))
    }
  })
}

// 超過(guò)5MB可能引發(fā)性能問(wèn)題
localStorage.setItem('hugeData', JSON.stringify(bigData))

// 判斷是否客戶(hù)端環(huán)境
if (process.client) {
  const data = localStorage.getItem('data')
}

try {
  localStorage.setItem('test', 'test')
} catch (e) {
  console.warn('隱私模式禁用本地存儲(chǔ)')
  // 降級(jí)方案：使用內(nèi)存存儲(chǔ)或cookie
}

import VuexPersistence from 'vuex-persist'
import SecureLS from 'secure-ls'

const ls = new SecureLS({ isCompression: false })

const vuexLocal = new VuexPersistence({
  storage: {
    getItem: key => ls.get(key),
    setItem: (key, value) => ls.set(key, value),
    removeItem: key => ls.remove(key)
  },
  filter: mutation => 
    !mutation.type.includes('敏感操作')
})

const store = new Vuex.Store({
  plugins: [vuexLocal.plugin]
})