Vue можно ли на watch повесить cookie?

Question

[Dauren S]

Хочу чтобы страница сама возвращала на страницу логина если срок куки прошел или пользователь удалил руками куки, можно ли повесить watch на cookie? Или как это правильно сделать?

Comments

[Alex]

https://developer.mozilla.org/en-US/docs/Mozilla/A...

Answer 1

[Aetae]

Во-первых: watch - это внутренняя особенность Vue, и работает она только на реактивных свойствах.
Во-вторых: событий на изменение cookie не предусмотрено, но всегда можно просто самостоятельно смотреть за изменениями по интервалу, примерно так:

const cookies = Vue.observable({});

(function update(prevString) {
  const cookieString = document.cookie;

  if (prevString !== cookieString) {
    const cookieObject = Object.fromEntries(
      cookieString.split(/; */)
        .map(
          c => c
            .split('=', 2)
            .map(decodeURIComponent)
        )
    );

    for (const [name, value] of Object.entries(cookies)) {
      if (name in cookieObject) {
        if (cookieObject[name] === value)
          delete cookieObject[name];
      } else {
        Vue.delete(cookies, name);
      }
    }

    for (const [name, value] of Object.entries(cookieObject)) {
      Vue.set(cookies, name, value);
    }
  }

  setTimeout(update, 100, cookieString);
}());

Vue.util.defineReactive(Vue.prototype, '$cookies', cookies);

Теперь можешь делать так this.$watch('$cookies.cookie_name', () => {...})
(если нужна поддержка установки новых значений через this.$cookies.cookie_name = 'cookie_value' - тут уж самостоятельно)