14-插件面板数据保存到内存.md

CocosCreator3D插件教程(14)：插件面板数据保存到内存

开发过程中，有时需要将一些数据存储起来，比如下图：

<div style="display: flex; flex-direction: row;">
    <input id="input" type="text" style="flex: 1;"/>
    <button id="btn" style="width: 40px;height: 30px;margin-left: 5px;" @click="onBtnClick">
        保存
    </button>
</div>

1.刷新插件面板，数据无法持久化

而实际开发中我们会发现，每次重新加载面板，数据都会发生重置。

这是因为：

插件面板是运行在渲染进程，当面板刷新后，渲染进程会重新加载，同时面板数据也释放重置了。

也就是说，渲染进程的数据不可靠，其生命周期和面板的打开关闭息息相关。

那么有没有什么办法，可以避免这种问题呢？当然有啦，我们可以将数据保存到主进程中

这种方案，只有编辑器退出了，放在主进程的数据才会被释放。

2.将数据存放在主进程

这种做法就需要，面板与插件进行交互，代码如下：

• 在panle.js中，当按钮点击时，通过调用Editor.Message.send接口，发送saveData消息，将数据传递到主进程：

exports.$ = { 
  btn : "#btn"
	input: "#input"
};
exports.ready = function(){
	this.$.btn.addEventListener("click", ()=>{
    let name = this.$.input.value;
    Editor.Message.send('hello-world', 'saveData', name)
  });
}

• 在package.json定义saveData消息，处理面板发送过来的数据：

{
	// ...
	"contributions":{
		"messages": [
			"saveData": {
        "methods": ["saveData"]
      }
		]
	}
	// ...
}

• 在main.js，实现saveData消息逻辑：

  我们将接受到的数据保存到主进程的panelData变量

let panelData = "";
exports.methods = {
	// ...
	saveData (data) {
		console.log(data);
    panelData = data;
	}
}

这样，插件面板的数据就顺利保存到内存中了，接下来，我们需要只需要读取数据即可：

3.从主进程中读取数据

• 修改panel.js，从主进程中读取数据：

exports.ready = async function(){
	let name = await Editor.Message.request('hello-world', 'getData');
	this.$.input.value = name;
}

• 修改package.json，增加getData消息：

{
	// ...
	"contributions":{
		"messages": [
			"getData": {
        "methods": ["getData"]
      },
		]
	}
	// ...
}

• 修改main.js，实现getData消息：

let panelData = "";
exports.methods = {
	// ...
  async getData () {
      return panelData;
  }
}

至此，我们已经实现将数据成功保存在内存中，无论插件面板如何刷新，都可以正常获取到之前设置的数据。

相关代码我已经放在gitee上，有需要的可以自取: https://gitee.com/tidys/creator3d_plugin_case/tree/master/case1

本节教程相比之前的教程，需要动手实践下才能真正体会进程之间的数据是如何传递。

纸上得来终觉浅，绝知此事要躬行