分类

系统存储，普通数据存储，用户数据存储，页面数据存储，页面用户数据存储，路由快照和路由用户快照。

系统存储

用于存储用户打开的标签页，是否展开侧边栏，页面大小，主题等数据，

实现方案

import low from 'lowdb';
import LocalStorage from 'lowdb/adapters/LocalStorage';
import { cloneDeep } from 'lodash'

const adapter = new LocalStorage('db');   // localstorage 名称
const db = low(adapter);

db.defaults({
    posts: []
}).write()

db.get('posts').push({ title: 'vue解密' }).write()

完整代码

// util.db.js

import low from 'lowdb';
import LocalStorage from 'lowdb/adapters/LocalStorage';
import utils from '@/utils'

db
    .defaults({
        sys: {},
        database: {} 
    })
    .write()

export default db

/**
 * 初始化路径, 如果提供了默认值，会将默认值写入。如果已经存在值并且值校验出错，重新写入默认值
 */
export function pathInit({ dbName = 'database', path = '' , user = user, validator = () => true, defaultValue = '' }) {
    const uuid = utils.cookies.get('uuid') || 'ghost-uuid';
    const userPath = user ? `user.`${uuid} : 'public';
    const keyPath = path ? `.${path}` : ''
    const finalPath = `${dbName}.${userPath}${keyPath}`

    const value = db.get(finalPath).value();

    if(value === undefined || !validator(value) ) {
        db.set(finalPath, defaultValue).write()
    }

    return finalPath;
}

export function dbSet({
    dbName = 'database',
    path = '',
    user = true,
    value = ''
}) {
    db.set(pathInit({
        dbName,
        path,
        user,
    }), value)
    .write()
}

/**
 *  获取db值，如果没有值，设置一个默认值并返回
 */
export function dbGet({
    dbName = 'database',
    path = '',
    user = true,
    defaultValue = ''
}) {
    return cloneDeep(db.get(pathInit({
        dbName,
        path,
        user,
        defaultValue
    })).value())
}

/**
 *  获取一个db对象，可以执行set, write操作
 */
export function database({
    dbName = 'database',
    path = '',
    user = true,
    defaultValue = '',
    validator = () => true
}) {
    return db.get(pathInit({
        dbName,
        path,
        user,
        defaultValue,
        validator
    }))
}

// store/module/db.js

import router from '@/router';
import { cloneDeep } from 'lodash'
import { database as getDatabase, dbGet, dbSet } from '@/utils/util.db.js'

export default {
    namespace: true,
    actions: {
        set(ctx, {
            dbName,
            path,
            value,
            user = false
        }) {
            return dbSet({ dbName, path, value, user })
        },

        get(ctx, {
            dbName,
            path,
            defaultValue,
            user = false
        }) {
            return dbGet({ dbName, path, defaultValue, user })
        },

        database(ctx, { user = false, defaultValue = {} }) {
            return getDatabase({ user, defaultValue });
        }

        databaseClear(ctx, { user = false }) {
            return getDatabase({user, validator: () => false, defaultValue: {}})
        }

        databasePage(ctx, { user = false, basis = 'fullpath'}) {
            return getDatabase({
                path: `page.${router.app.$route[basis]}`,
                user,
                defaultValue: {}
            })
        }

        databasePageClear({
            user = false,
            basis = 'fullpath',
        }) {
            return getDatabase({ 
                path: `page.${router.app.$route[basis]}`,
                user, validator: () => false,
                defaultValue: {} 
            })
        }
    },
}