ElectronVue系列 -- 5.使用electron-store存储信息到本地磁盘

由于需要持久化存储一些信息到磁盘上，信息比较简单，无需过多设计。经过搜索发现electron-store比较好用

1. 引入插件

Electron-Store https://github.com/sindresorhus/electron-store

$ npm install electron-store

2. 修改配置

修改文件vue.config.js文件进行配置

module.exports={ pluginOptions: { electronBuilder: { nodeIntegration: true } }, }

如果不进行上面的配置，那么会出现的问题就是__dirname is not defined

3. 示例demo

如下即示例demo

<template> <div class="header-tool"> <el-button type="primary" icon="el-icon-edit" v-on:click="add_new_connection"></el-button> </div> </template> <script> import Store from 'electron-store' import { app, remote } from 'electron' export default { name: 'HeaderTool', props: { msg: String, }, methods: { add_new_connection: function () { console.log('add new connection') const store = new Store(); // 存储信息 store.set('foo', 'bar'); // 根据process.type来分辨在哪种模式使用哪种模块 const APP = process.type === 'renderer' ? remote.app : app // 获取electron应用的用户目录 const STORE_PATH = APP.getPath('userData') console.log(STORE_PATH) // 显示存储的信息 console.log(store.get('foo')) }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> </style>

运行之后，就可以发现控制台输出截图如下

进入目录，发现文件存储名称为config.json

以上即可完成简单的信息存储和获取