如何解决使用vue getter / setter指向localStorage时的奇怪行为
我从这段代码中得到奇怪的行为。我想使用getter和setter指向本地存储。
第一次渲染应用程序时,将正确检索项目。 此后,将新项目添加到列表时,不会呈现该项目。另外,添加一个项目时,它只会在添加第一个项目之后交换上一个项目的索引处的值。
<input type="text" v-model="term" @keyup.enter="submit()" />
<ul>
<li v-for="(item,i) in history" :key="i">{{item}}</li>
</ul>
const app = new Vue({
el: '#app',data: {
term: '',},computed: {
history: {
get() {
return JSON.parse(localStorage.getItem('history')) || [];
},set(value) {
localStorage.setItem('history',JSON.stringify(value));
},methods: {
submit() {
this.history = [...this.history,this.term];
this.term = '';
},});
您可以在此处检查代码,因为SO不允许访问localStorage。添加第一项后,请记住刷新页面,并调查localStorage内部发生的情况。
https://codepen.io/bluebrown/pen/dyMMRKj?editors=1010
此代码是一些alpinejs项目的移植。在那里奏效了。
也就是说,我可以像下面这样编写它。但是,我现在很好奇,为什么上面的示例如此行事。
const app = new Vue({
el: '#app',history: [],created() {
this.history = JSON.parse(localStorage.getItem('history')) || [];
},watch: {
history: {
deep: true,handler(value) {
localStorage.setItem('history',methods: {
submit() {
this.history = [...this.history,this.term];
this.term = '';
},});
解决方法
之所以不起作用,是因为Vue只能观察普通物体。 Vue无法观察到std::next
之类的本机对象。如果您将某些内容放入本地存储,Vue将不知道该内容,并且您的视图也不会自动更新以显示这些更改。
Vue在docs中为localStorage
对象提到了这一限制:
Vue实例的数据对象。 Vue将以递归方式将其属性转换为getter / setter,以使其“具有反应性”。 该对象必须是普通对象:诸如浏览器API对象和原型属性之类的本机对象将被忽略。经验法则是,数据应仅是数据-不建议观察具有自身状态行为的对象
这些限制适用于Vue的整个反应系统,包括data
属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。