vue使用js-cookie写入获取不到_Vue 面向对象 - 实战 - 内容管理系统（五）

紧接上文，接下来我们要处理布局问题，利用成熟工具最容易实现的布局是 grid 布局，我们将采用此种方式，配合 vue-grid-layout 来完成，首先我们来看看效果：

基本功能实现的差不多了，我们需要改变思维方式，即：

之前是自底向上，从功能角度解决一些复杂的点，现在需要自顶向下解决问题

首先我们需要一个 EJSHandler 组件 和一个 EJSHandlerService 类，这个类我们将依赖注入，其下的所有组件都将可以访问到他们的数据：

加入了一些测试数据

然后，我们创建一个 Layout 组件和相关服务，使用 vue-grid-layout:

相关服务为：

用一个新的 WidgetService， 继承自 Template service （只有一层，不用太过担心）:

界面很美好，功能基本都完成

但是有个很恐怖的一点，响应式保持失败了，为什么呢？

一旦点击按钮更新 ejs 的组件，会发现报错，拿不到value

记住这个错误：

Uncaught (in promise) TypeError: Cannot create property 'value' on string/number/data

是的，这就是Vue新版本的重难点 ——

响应式保持

模板中一旦写入了 ref，自然会被 Vue 拆包，一般情况下这个不会影响太大，但是若是第三方库在子组件中进行了模板映射，出现了拆包动作，问题就很难解决了：

我们将一个包含ref的复杂结构传入给了 vue-grid-layout，并不知道他会不会改我们的值，Vue3 目前正式版都还没有发售，第三方库肯定没有响应式保持的意识，因此，将 WidgetService 伙同 layout 数据一股脑传进去是绝对会失败的，即便我这么处理也没有用：

这里我并没有强制更新所有子项，然而还是失败了

html 还是字符串，不是 ref

响应式保持的 bug，修改起来会非常消耗时间，我在优化的同时，也总结了一套解决响应时保持问题的规则，可以与大家共享

将在下一章开个特别篇讨论~

总结

以上是生活随笔为你收集整理的vue使用js-cookie写入获取不到_Vue 面向对象 - 实战 - 内容管理系统（五）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。