add: 添加暂存sql功能 #21
add: 添加暂存sql功能 #21
Conversation
|
几……几岁？🐮🐮🐮🐮 |
|
14...14岁???大佬 |
|
鱼皮大佬您好，不知道是不是有什么不对的地方，您才没合并代码，请问我这样写代码可以吗？ |
因为比较忙没有及时回复哈，抱歉。跟另外一个提交的建议是一样的： 首先代码写的还是很不错的，能想到把 saveCode 相关的增删改查抽离成一个独立文件很好。 本项目其实使用了 pinia 来做全局的状态管理，并使用 pinia-plugin-persistedstate 插件实现了 localStorage 的自动加载和同步，可以重点关注这段代码 ：https://github.com/liyupi/sql-mother/blob/3ad8917536d40308556d2781fcb48951ff4e7834/src/core/globalStore.ts#L17C1-L27C5 。期待改进 |
|
十分感谢鱼皮大佬的回复，我会去改进的，我会尝试去研究一下pinia，之前一直都用localStorage存储信息，没用过。。。。看起来和vuex一样，感觉很高端的样子，我是第一次用 |
|
不过这个东西好像还挺方便的，看了一下，把我写的saveCodeStore.ts那些增删改查换成pinia的defineStore，然后基本上在把SqlEditor.vue我写的那些替换成store提供的就可以了吧。。。 不过有一个问题：只要store的saveCode发生更改，就会触发watchEffect，就会重新初始化然后更新成默认的，然后用户原本写的就会发生改变，其他的还好，尤其是关闭功能，saveCode自己没了，代码直接变成默认的，这个原因我知道，就是saveCode发生改变，触发watchEffect事件，正在想办法解决。。。 十分感谢鱼皮大佬的回复！ |
|
鱼皮大佬您好，我现在已经把代码改成pinia版了，不过由于我是第一次使用pinia之类的框架，可能会有问题，都是照着网上的文章做的。。。 顺便实现了一下我说的那个自动保存 但是我觉得可能会有一些问题，但是我不确定：
还有一个问题，就是我并不会使用git合并代码，怕把我写的代码合并没了，您昨天新提交的代码我这里没有，如果我的代码无法合并，请您评论，我会重新把最新合并的代码传上来 参考文章：
另外，另一个提交(#24)就请您检查完这个提交pinia使用无误之后我在做，以免我写了半天都是错的 最后再次感谢鱼皮的回复！ |
|
还有感觉使用pinia之后会有一些问题，不过如果不计较那点存储空间就无所谓 我发现他保存的是一个json的字符串 {saveCode: "-- 请在此处输入 SQL↵select * from student", isSaveCode: true}这样就有一些问题， 如果用第一种我自己写的方法，就不会有一些json的“多余”部分，为什么说“多余”呢，比如 再比如，因为如果用户关闭功能，localStorage中就会存储如下内容，另外还有一个 {"saveCode":"","isSaveCode":false}这种情况下，原来我实现的方案中 这样对比就比原来多存东西了 请问就以上问题有什么优化方案吗？ 当然，我承认如果不计较那点存储空间就无所谓，但是我可不想让市面上的应用都变从某款“小而美”的app一样 不过pinia是真的方便 最后感谢鱼皮的解答！ |
首先你节约存储空间的意识是非常好的，但是回归到这个项目来说，一个 key 的大小几乎可以忽略不计，这种时候就需要考虑实现项目的时间成本了。如果时间足够，你可以把这个 key 从 json 中清除掉，下次再重新设置；但很多时候，我们可以把这些小的细节放到项目完善后慢慢优化~ |
|
感谢鱼皮大佬的回复，那么请问，我这个新提交的代码有什么问题吗？ 我应该都把存储改成pinia版了 |
看下上面的评论哈 |
请问大佬，如何查看评论？我找了半天都没有啊。。。 |
src/components/SqlEditor.vue
Outdated
| toRaw(inputEditor.value).setValue( | ||
| "-- 请在此处输入 SQL\n" + level.value.defaultSQL | ||
| ); | ||
| if (inputEditor.value && !isIntnCode) { |
There was a problem hiding this comment.
1）可以直接在 onMounted 中单次加载暂存的 SQL，没有暂存的 SQL 则初始化 SQL 为默认值。
2）在 watchEffect 监听关卡改变时增加判断，如果是首次加载，不做任何处理（因为已经在 onMounted 中处理）；否则视为关卡改变，初始化 SQL 为默认值
There was a problem hiding this comment.
鱼皮大佬您好，我已经实现了您下面的这个点击按钮加载的思路了
不过我还是觉得可以添加一个自动加载，可以准备一个开关，用户希望自动加载就把开关打开
根据您的思路，我感觉好像有些问题。。。（这或许也是我没有理解您的思路吧。。。）
我感觉根本不需要第一次在 onMounted 中初始化，在组件加载时，watchEffect 就会被执行了，而且会被执行2次！
查 vuejs 官方文档 watchEffect 部分（https://cn.vuejs.org/guide/essentials/watchers.html#watcheffect），
watchEffect 相当于 watch 的 { immediate: true } ，会在 创建侦听器时 或 其内部的属性值发生变化时 被调用，
综上，我总结出 watchEffect 可能被调用的时候：（我都一个个用注释和console.log测试过了）
- 组件被加载时 （创建侦听器时）
- inputEditor值变化时
- level值变化时
这就可以解释他为什么在组件加载时会被执行2次：第1次是组件被加载时，因为这时创建了侦听器；第2次是inputEditor值变化时，因为当组件挂载完成后就会执行 onMounted 初始化编辑器， inputEditor 的值随之发生改变， watchEffect 被执行。
我感觉这就矛盾了吧。。。。我感觉您其实是想实现这种效果：组件首次被加载时从 onMounted 中加载，后续加载在从 watchEffect 加载吧，可是这一开始就执行2次。。。
这就是我的理解
我顺便还想问一个问题，这里的 watchEffect 是否可以换成 watch(level,()=>{})
不过这样当然就会遇到首次加载无法被执行的问题，不过没有关系，在 onMounted 中在执行一遍就好了
不过我真的是很想吐槽一下：一开始我了解 watchEffect 时看的是网上的一些文章，看了半天都不太明白，后来实在不明白，就看了看官方文档，秒懂。。。感觉网上的文章都。。。
最后还是要感谢鱼皮大佬回复我的问题！
|
update 添加手动加载按钮 鱼皮大佬您好，手动加载按钮已经加好了 不过手动加载按钮难免会和自动保存有一定的冲突，因为一开始加载的是初始化的那个代码，而自动保存就会把这个初始化的代码存回去，这样再点击手动加载按钮的时候，加载的就是刚才存回去的代码了 我采用了一个办法，就是显示初始化代码的时候，把自动保存关掉，可是这样就会有一个问题：什么时候打开自动保存？ 我采用的是加载完之后立即打开。 可是这样又会有问题了，如果用户这时候，不小心在上面打了个字母，保存的内容瞬间改变，之后用户点击按钮，加载的就会是刚才用户更改的内容了而不是原来的内容了。。。。 所以我感觉这会很矛盾，还不如自动加载 我在页面底下添加了几个开关，让用户选择是否自动加载内容 还有就是上面评论的那个思路，我实现了，用 watch 的那个，因为原来用的 watchEffect 里面的值一改变，函数就会被重新运行，我实在无法解决这个问题，所以就改了。我测了一下，无bug，不知道会有什么藏得更深的问题 差点忘了，还有一点有问题，就是重新开启保存代码时，代码不会自动保存一遍，这个是我的问题，我到现在还没有研究明白 vue3 setup 下如何获取到 这就是我能想到的几个问题了，希望鱼皮大佬指点，感谢(o^^o)！ 最后还是要感谢鱼皮开源此网站！ |
|
鱼皮大佬您好，上次把代码改好，为什么您一个多月都没有回复我，请问我的代码哪里有问题？ |
|
鱼皮大佬您好，我期中考试都完了，您怎么还没回我？这个代码具体有什么问题啊？那个。。。我感觉这个代码暂存功能也应该把信息存在源代码里已经有了的那个Store里了吧？怕您看不见@一下您 @liyupi |
|
@liyupi 鱼皮大佬您好，都12月了您怎么还不回复？我的代码到底有什么问题 |
add: 添加暂存sql功能
在使用网站时，sql老是回到初始状态，我希望他可以保存，所以研究了一下源码，实现了
sql代码数据存在localStorage中，关闭页面不丢失
不过有一个问题，只有用户点击确定按钮之后代码才会保存，不过我觉得也没问题，用户点击确定代表用户写完代码了，再保存
回来我有时间研究一下，看看如何实现实时保存
由于本人第一次使用typescript，照葫芦画瓢写出来了，过了编辑器的的代码检查，应该没问题，
本人只有14岁，并没有专门学过这个，所以可能写的不是很好，希望大佬指点，感谢！
部分思路参考：https://www.bilibili.com/video/BV18T4y1z7zb/?spm_id_from=333.999.0.0
最后感谢鱼皮开源这个网站！