Javascript 无法调用BeforeDestry钩子中定义的回调

我正在尝试使用vue.js编写一个简单的todoList，我希望在vue实例销毁之前将这些ToDo保存到cookie中。但我觉得奇怪的是，尽管我在

beforeDestory

hook中编写了回调，但却从未调用过这个钩子

我检查了Vue文档，找不到任何提示

当我试图 通过将回调添加到

窗口，将这些TODO保存到cookie中。在卸载
和
窗口之前，onunload
，它可以工作

我的代码是

computed: {
  todos() {
    return this.$store.getters.todos
  },
...
},
beforeDestroy() {
  myStorage.setTodos(this.todos)
}


todos是store.js中定义的数组，它已导入main.js中，如

import myStorage from '@/utils/storage'
...
const store = new Vuex.Store({
  state: {
    todos: myStorage.getTodos()
    ...
  },
  getters: {
    todos: state => state.todos
  }

myStorage的定义如下：

import Cookies from 'js-cookie'

const todoKey = 'todo'

const setTodos = (todos) => {
  Cookies.set(todoKey, JSON.stringify(todos))
}

const getTodos = () => {
  const todoString = Cookies.get(todoKey)
  let result = []
  if (todoString) {
    const todoParsed = JSON.parse(todoString)
    if (todoParsed instanceof Array) {
      result = todoParsed
    }
  }
  return result
}

export default {
  setTodos: setTodos,
  getTodos: getTodos
}

我使用的是
VUE2.6.10
，我的项目是由vue-cli3构建的。
我在windows10上使用Chrome开发了这个todolist

我希望在关闭窗口或刷新窗口后，todolist仍然可以从Cookie中获取以前编写的todo。但事实是，从未调用
beforeDestory
钩子。
刷新窗口时，不会调用组件的
beforedestore（）
，因为您不是以编程方式销毁组件，而是结束整个浏览器会话

更好的解决方案是只要在组件中的
todos
对象发生变化时调用
myStorage.setTodos
。您可以通过为computed属性设置一个监视程序来实现这一点：

computed: {
  todos() {
    return this.$store.getters.todos
  },
},
watch: {
    todos() {
        myStorage.setTodos(this.todos)
    }
}

或者，让VueX存储处理存储。您的问题不清楚您是否正在变异
todos
状态：如果您正在变异它，您还可以在商店中执行
myStorage.setTodos
。从这个意义上讲，实际的组件可能是哑的，因此它所需要做的就是更新存储。
哦，这很有用，非常感谢。但是，如果我只想在离开页面之前保存这些项目一次，或者有更好的解决方案吗？@jimmy您可以收听
onbeforeunload
事件，但这意味着在用户离开之前用对话框/模式烦扰他们。每当待办事项列表发生变化时，不断保存它有助于防止在用户强制退出浏览器/选项卡、计算机意外关闭等情况下出现状态丢失。如果您担心性能，您可以随时限制/取消设置cookie的频率。啊哈，看来我还不熟悉javasrcipt:p，我还有很长的路要走。这是我第一次在stack overflow中提问，我真的很感谢你们的回答。