CocosCreator3D插件教程(15)：插件面板数据保存为配置

在上篇教程中，我们把数据保存到主进程中，当面板刷新，或者重新打开时，仍旧可以读取到之前保存的数据。

你可能好奇，为什么我要单独讲解这个知识点，举个栗子：

A面板的一些临时数据，你希望B面板能够获取到，
并且即使A面板关闭了，你也希望这些临时数据能够一直存在，
并且这些临时数据，又没有保存为配置的必要性。

多面板交互时，我们会经常使用主进程来暂存一些数据，帮助我们做数据持久化，后面会深入讲解这方面内容。

但如果数据保存在主进程中，当整个编辑器退出，再次打开面板的时候，发现数据同样会消失不见，那么有没有办法持久保存呢？

机智的你一定想要了，我们要把数据保存为文件，就能永久存储了。

1.新增一个配置文件读写的模块代码：

我们新增一个cfg.js，专门处理配置文件的读写操作：

const Path = require('path');
const Fs = require('fs');

class Cfg {
    constructor () {
        this.data = { name: '' };

        if (Fs.existsSync(this.file)) {
            try {
                this.data = JSON.parse(Fs.readFileSync(this.file, 'utf-8'))
            } catch (e) {
                this.data = { name: '' }
            }
        } else {
            Fs.writeFileSync(this.file, JSON.stringify(this.data));
        }
    }

    get file () {
        return Path.join(Editor.Project.path, 'settings/hello-world.json');
    }

    saveName (name) {
        this.data.name = name;
        Fs.writeFileSync(this.file, JSON.stringify(this.data));
    }
}

module.exports = Cfg;

这里将配置文件保存在项目的settings/hello-world.json目录，

2.面板中读取配置、写入配置。

修改panel.js，替换读写数据的逻辑：

exports.ready = async function (){
  	const Cfg = require('./cfg'); // 引入我们的配置文件读写模块
  
    let cfg = new Cfg(); // 读取配置
    let { name } = cfg.data; // 获取配置数据
    this.$.input.value = name;
  
    this.$.btn.addEventListener('click', async () => {
        let name = this.$.input.value;
        cfg.saveName(name); // 保存配置
    });
}

这样一个简单的面板配置文件就实现了！

目前来说，我们是把配置的读写放在了渲染进程进行处理，这样基本满足了大部分需求，毕竟大部分配置都是和面板相关联。

当然你也可以结合上节教程，放在主进程处理，本质上是没有多大的区别。

其实creator3D插件体系，早已帮我们实现了类似这样的功能，下一篇教程中，将会详细介绍。