zoukankan      html  css  js  c++  java
  • vuex持久化插件使用

    目的

    让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。

    应用场景

    • 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。
    • 再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页需要存储在本地。

    步骤

    • 首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。
    npm i vuex-persistedstate
    
    • 假设 modules 下有 user.js 和 cart.js文件需要持久化

    • 然后在src/store/index.js中配置下:

    import { createStore } from 'vuex'
    import createPersistedstate from 'vuex-persistedstate'
    
    import user from './modules/user'
    import cart from './modules/cart'
    import cart from './modules/category'
    
    export default createStore({
      modules: {
        user,
        cart
      },
      plugins: [
        createPersistedstate({
          key: *****',
          paths: ['user', 'cart']
        })
      ]
    })
    

    注意:

    ===> 默认是存储在localStorage中

    ===> key是存储数据的键名

    ===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token

    ===> 修改state后触发才可以看到本地存储数据的的变化。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    ZOJ 2588 Burning Bridges
    POJ 1966 ZOJ 2182 Cable TV Network
    HDU 5348 MZL's endless loop
    HDU 5352 MZL's City
    Tarjan算法求解无向连通图的割点、割边、点双连通分量和边双连通分量的模板
    ZOJ 1119 SPF
    HDU 3452 Bonsai
    HDU 1520 Anniversary party
    POJ 2239 Selecting Courses
    POJ 1144 Network
  • 原文地址:https://www.cnblogs.com/XF-eng/p/15235639.html
Copyright © 2011-2022 走看看