在之前我们创建的这个 vue 应用里面，用到了 lokijs 数据库，它可以在本地存储一些数据 .. 如果是 web 应用，存储数据的地方默认会是浏览器的 Local Storage ..

下面我们再去配置一下 .. 在当前创建的这个项目里面也用一下 Lokijs 这个数据库 .. 先在项目下面去安装一下这个库 ..

在项目的下面，执行一下 npm install lokijs --save

安装完成以后，再回到项目 .. 新建一个文件可以去配置使用一下数据库 .. 放在 src ，database 目录的下面，文件的名字是 index.js

文件的一开始， 可以导入 Loki .. import Loki from 'lokijs'

然后找到之前我们创建的这个 vue 应用下面的 .. db.js .. 复制一下里面的内容 ..

把它们粘贴到这个新创建的 js 文件里 ..

这里需要再简单修改一下 .. 先 export 这个 db ... 这个 loki 的首字母换成大写的 ..

在这个数据库配置里面，再添加一个 persistenceMethod，设置一下存储数据的方法，这里要把它设置成 localStorage

下面定义的这两个函数，名字跟括号之前需要添加一个空格 .. 不然 JSLint 会抱怨我们的代码风格 ..

再导出下面这个 loadCollection .. 它可以帮我们加载需要的数据库里的集合 ..

state

打开之前创建的 store 里的 state.js ，在这个文件里可以导入使用数据库 .. import .. 一组大括号 .. 导入 db 还有 loadCollection .. from 上一级目录下面的 database ..

先测试一下 .. 用一下 loadCollection 这个方法 .. 得到 notes 这个集合 .. 这个方法支持 Promise ... 所以可以接着用个 then .. 得到的结果是 collection .. 里面，再把这个 collection 输出到控制台上 ..

也可以再把 db 输出到控制台上 ...

这里会出现一个错误 .. 说没找到 loki 需要的 fs 模块 .. 我们要在 web 上使用这个数据库，所以不需要 fs 模块 ..

可以去配置一下 webpack ， 在项目的 build 下面，打开这个 webpack.base.conf.js .. 在配置里面，添加一个 node .. 里面，再添加一个 fs ，对应的值设置成 empty ..

然后回到命令行 .. 先停止服务器 ... ctrl + C ... 重新再运行一下 ...

这样就不会再报错了 ..

打开浏览器的控制台 ..

这里会输出数据库 .. 还有数据库里的 notes 集合 ...

存储数据的地方是浏览器的 Local Storage .. 找到 Application 选项卡 ... 在 Storage 下面，找到 Local Storage .. 打开这个 localhost ..

这里会有一个名字是 notes 的数据 .. 对应的值就是 loki 数据库里的数据 ....