lowdb在Vue项目中的使用;

介绍:轻量级本地JSON数据库;  使用JSON为存储的数据结构,基于lodash(https://www.lodashjs.com/)开发;

实际应用:Vue项目中Vuex存储数据,刷新页面时数据丢失的问题;此种情况下可用lowdb+LocalStorage适配器解决;

                  即在路由钩子函数 beforeEach中重新加载数据,从lowdb中获取数据,并将获取的数据重新放入Vuex的state对象中;每次更新state中的数据时, 同时也更新lowdb中存放的数据;

使用步骤: 

             1. 安装lowdb插件;

             2.  创建一个dbUtils.js的文件,导出db对象

             3. 在页面引入dbUtils.js文件,使用lowdb进行数据的CRUD操作;

dbUtils.js文件:


import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'


const adapter = new LocalStorage(`zw-lowdb-util`)
const db = low(adapter) 

db.defaults({
    sys: {},
    dataList: []
  }).write()

export default db

在页面实际使用:




lowdb在Vue项目中的使用;_第1张图片

 

 

 

你可能感兴趣的:(Vue,vue)