Vuex页面刷新数据不丢失的几种解决方案

// store/index.js
const store = new Vuex.Store({
  state: {
    userInfo: JSON.parse(localStorage.getItem('userInfo')) || null
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload
      localStorage.setItem('userInfo', JSON.stringify(payload)) // 同步存储
    },
    clearUserInfo(state) {
      state.userInfo = null
      localStorage.removeItem('userInfo') // 清除存储
    }
  }
})

// 使用示例
methods: {
  login() {
    const myData = { name: '小杨', token: 'abc123' }
    this.$store.commit('setUserInfo', myData)
  }
}

npm install vuex-persistedstate

// store/index.js
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: 'my-vuex-storage', // 存储的key名
      paths: ['userInfo', 'cart'], // 只持久化指定模块
      storage: window.sessionStorage // 改用sessionStorage
    })
  ]
})

createPersistedState({
  storage: {
    getItem: key => uni.getStorageSync(key), // 小程序兼容方案
    setItem: (key, value) => uni.setStorageSync(key, value),
    removeItem: key => uni.removeStorageSync(key)
  }
})

import Cookies from 'js-cookie'

const store = new Vuex.Store({
  state: {
    token: Cookies.get('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      Cookies.set('token', token, { expires: 7 }) // 7天后过期
    }
  }
})

// 错误示范！存了密码明文
localStorage.setItem('password', '123456') 

// 正确做法：只存token
localStorage.setItem('token', '加密后的字符串')