Javascript 更新watch Vue.js上的cookie

我目前正在实施cookies。 我安装了要设置的cookie，并且这个cookie最初有一个空对象。 一旦对象被填充，我就会看到对象被更新，我想在这里更新我的cookie，但是，它不会在监视时得到更新。 我会在下面写一份草稿

   <template>
         <details @detailsCompleted="savedDetails"></details>
    </template>


      data() {
         return {
               obj:{}
         }
            },

    methods: {
    savedDetails: function(objectPassed) {
    this.obj = objectPassed;
    }
    }
     mounted: function() {
           this.obj = {};
            Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
            Cookies.get("name");

        }

        watch: {
        obj: {
        handler: function(val){
        Cookies.set("name", JSON.stringify(val), {expires: '1m'});
         Cookies.get("name");

        }
    }

数据（）{
返回{
obj:{}
}
},
方法：{
savedDetails:函数（objectPassed）{
this.obj=objectPassed；
}
}
挂载：函数（）{
this.obj={}；
set（“name”，JSON.stringify（this.obj），{expires:'1m'}）；
Cookies.get（“name”）；
}
观察：{
obj：{
处理程序：函数（val）{
set（“name”，JSON.stringify（val），{expires:'1m'}）；
Cookies.get（“name”）；
}
}

---

我可以看到Cookie被初始化了，并且有空的obj，但是，在watch上没有更新，我如何实现这一点呢？谢谢你的

obj

在

挂载的
钩子中是局部范围的。如果你没有在组件的
数据
函数中声明，或者作为计算属性声明，watcher就看不到我因为它不是反应性的

尝试：

稍后编辑：根据您下面的评论和更新的代码片段，我仍然怀疑您的问题是由于错误地更新了本地状态造成的

由于您的对象初始化为空文本，当您使用
this.obj=objectPassed更新它时；
在
savedDetails
中，您实际上是在对象上创建新属性。这种类型的更新不会是反应性的，因此，您的观察者不会做任何事情。确保反应性的正确方法是：

this.$set（this'obj'，objectPassed）；

阅读有关主题“
的官方文档中有关反应性注意事项的更多信息，只需将cookie与saveDetails方法一起更新，如下所示

<template>
   <details @detailsCompleted="savedDetails"></details>
 </template>

 data() {
   return {
     obj:{}
    }
  },
  methods: {
    savedDetails: function(objectPassed) {
      this.obj = objectPassed;
      Cookies.set("name", JSON.stringify(objectPassed), {expires: '1m'});
      Cookies.get("name");
    }
  },
  mounted: function() {
    this.obj = {};
    Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
    Cookies.get("name");
  }


数据（）{
返回{
obj:{}
}
},
方法：{
savedDetails:函数（objectPassed）{
this.obj=objectPassed；
set（“name”，JSON.stringify（objectPassed），{expires:'1m'}）；
Cookies.get（“name”）；
}
},
挂载：函数（）{
this.obj={}；
set（“name”，JSON.stringify（this.obj），{expires:'1m'}）；
Cookies.get（“name”）；
}

编辑：


这是一把小提琴

也许您正试图通过查看开发工具中的“应用程序”选项卡来确定cookie是否已更新？在那里有一个小的“刷新”按钮，请在更新cookie后尝试单击它。
或者，您也可以使用。对不起，我的错，我刚刚更新了帖子，在将对象装载为空时，从子对象发送到父对象组件（我在其中设置cookie），然后我在观察obj，因为值可能会发生变化，更新后的obj我想设置/更新cookie。因此，我的obj不会设置属性。请编辑您的剪贴代码，因为我试图理解您阅读注释的意思并实现它，但它似乎无法解决问题，谢谢。在我发布问题之前，我已经尝试过这个方法，但它不能帮助您确定cookie是否首先设置？js cookie library似乎不支持string expires格式，只支持数字或日期对象。这可能会导致错误并阻止设置cookie。嗯，我非常确定它确实在我发布时首先设置可以看到“name”…，1米后就消失了。好吧，检查小提琴，它在那里工作得很好。我也做了同样的事情，但在我的例子中，它对对象不起作用。我试过用字符串代替，它工作得很好，不需要点击工具中的任何刷新按钮。同样在安装时，我注意到在“value”字段下我的对象有“%7B%7D”，而不仅仅是一个空对象{}，当我检查你小提琴上的工具时会显示出来。
<template>
   <details @detailsCompleted="savedDetails"></details>
 </template>

 data() {
   return {
     obj:{}
    }
  },
  methods: {
    savedDetails: function(objectPassed) {
      this.obj = objectPassed;
      Cookies.set("name", JSON.stringify(objectPassed), {expires: '1m'});
      Cookies.get("name");
    }
  },
  mounted: function() {
    this.obj = {};
    Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
    Cookies.get("name");
  }