vuex持久化 , vuex-persistedstate

目录

Vue持久化

实现步骤

具体代码

更改本地储存方式

---

Vue持久化

• 在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储，再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地
• 为什么采取这个方案(保留本地一份,vuex存储一份)
• vuex
  • 基于内存的方案 存取速度特别快 基于vuex模式使用特别方便
  • 缺点是刷新就会丢失
• 本地储存
  • 基于磁盘的方案 存取速度缓慢 操作起来没有vuex方便
  • 优点是刷新不丢失
• 场景 : 即想要vuex存取速度快和vuex配合灵活 还想要刷新不丢失

实现步骤

• 安装vuex-persistedstate插件
• vuex中准备user模块和cart模块
• 将插件配置到vuex的plugins选项中 , 配置user模块和cart模块进行状态持久化
• 修改state数据就会触发自动同步机制 , 修改一下数据检测是否同步成功

具体代码

• 在src/store文件夹下新建modules文件, 在modules下新建user.js和cart.js

• // 用户状态
  export default {
    namespaced: true,
    state: () => ({
      // 个人用户信息
      profile:{
          id: '',
          nickname: '',
          avatar: '',
          token: '',
          mobile: '' 
      }
    })
  }

•          

  // 购物车状态
  export default {
    namespaced: true,
    state: () => ({
        list:[]
    })
  }

•  在src/store/index.js中导入user模块和cart模块

• import { createStore } from 'vuex'
  
  import user from './modules/user'
  import cart from './modules/cart'
  
  export default createStore({
    modules: {
      user,
      cart
    }
  })

•  使用vuex-persistedstate插件来进行持久化

• import { createStore } from 'vuex'
  import createPersistedstate from 'vuex-persistedstate'
  
  import user from './modules/user'
  import cart from './modules/cart'
  
  export default createStore({
    modules: {
      user,
      cart
    },
    plugins: [
      createPersistedstate({
        key: 'erabbit-client-pc-store',
        paths: ['user', 'cart']
      })
    ]
  })

更改本地储存方式

• 默认的本地储存为localStorage , 如何修改为Cookie方式
• 第一步 下载js-cookie包
• 第二步引入包
• 第三步在vuex里plugins进行配置

• import { createStore } from 'vuex'
  import createPersistedstate from 'vuex-persistedstate'
  import user from './modules/user'
  import cart from './modules/cart'
  // 引入包
  import * as Cookies from 'js-cookie'
  export default createStore({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
      user,
      cart
    },
    // vuex + 本地储存 插件配置
    // plugins: [
    //   createPersistedstate({
    //     key: 'erabbit-client-pc-store', // 本地储存 键值对的形式
    //     paths: ['user', 'cart']
    //   })
    // ]
    // 进行配置
    plugins: [
      createPersistedstate({
        key: 'erabbit-client-pc-store', // 本地储存 键值对的形式
        paths: ['user', 'cart'],
        storage: {
          getItem: key => Cookies.get(key),
          setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
          removeItem: key => Cookies.remove(key)
        }
      })
    ]
  })