在手表 Vue.js 上更新 cookie

Question

我目前正在实施 cookie。 我有要在安装时设置的 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");

        }
    }

我可以看到 cookie 已初始化，并且 obj 为空，但是手表上没有更新，我该如何实现？谢谢

Answer 1

只需像这样更新 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");
  }

编辑：

https://jsfiddle.net/k85o7bdq/

这是一个有效的小提琴。

也许您正试图通过查看开发工具中的“应用程序”选项卡来确定 cookie 是否已更新？那里有一个小刷新按钮，更新 cookie 后尝试点击它。

Answer 2

mounted 挂钩内的 obj 是本地范围的。如果您没有在组件的 data 函数内或作为计算属性声明它，则观察者不会看到它，因为它不是反应式的。

试试：

data () {
    return {
      obj: null
    }
  },
  mounted () {
    this.$set(this, 'obj', {name: 'hello', age:'10', gender: 'not to say'});
    Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
    Cookies.get("name");
  }

稍后编辑：根据您在下面的评论以及更新的代码 sn-p，我仍然怀疑您的问题是由于错误地更新了您的本地状态引起的。

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

this.$set(this, 'obj', objectPassed);

阅读有关“Reactivity in depth”主题的官方文档中有关反应性警告的更多信息