vue使用js-cookie写入获取不到_Vue 面向对象 - 实战

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

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

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

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

加入了一些测试数据

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

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 面向对象 - 实战 - 内容管理系统（五）相关推荐

vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
vue的js文件中获取vue实例
1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: ' ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
原文链接前言在基于iView的后台项目中,表格组件是我们的老朋友了.实现如下的效果更是最基本的需求: 开始在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果 ...
JS Cookie获取值
Cookie Cookie 是直接存储在浏览器中的一小串数据.它们是 HTTP 协议的一部分,由 RFC 6265 规范定义. Cookie 通常是由 Web 服务器使用响应 Set-Cookie H ...
JS创建、获取、删除 cookie 方法
js 创建 cookie 方法 // 没有设置 cookie 过期时间的话,默认是会话cookie(浏览器关闭时,该cookie失效,被删除) document.cookie = cname + & ...
JS设置，获取，删除cookie
JS设置,获取,删除cookie 由于chrome等浏览器存在samesite安全措施,导致传统http页面后端无法设置cookie到前端,所以考虑在返回值中添加cookie值,使用前端js进行coo ...
解决cookie写入问题
解决cookie写入问题接下来我们查看首页cookie: 什么都没有,为什么? 问题分析我们在之前测试时,清晰的看到了响应头中,有Set-Cookie属性,为什么在这里却什么都没有? 我们之前在讲 ...

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

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

响应式保持

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

最新文章

热门文章