javascript - 无法调用 beforeDestroy Hook 中定义的回调

Question

我正在尝试使用 vue.js 编写一个简单的 todoList，并且我想在 vue 实例被销毁之前将这些 todos 保存到 cookie 中。但我觉得奇怪的是，虽然我在 beforeDestory 钩子(Hook)中编写了回调，但该钩子(Hook)从未被调用。

我检查了Vue文档，没有找到任何提示。

当我尝试通过向 window.onbeforeunload 和 window.onunload 添加回调将这些待办事项保存到 cookie 中，它可以工作。

我的代码就像

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

tod​​os是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
}

我使用的是vue 2.6.10，我的项目是由vue-cli3构建的。我在 Window 10 上使用 Chrome 开发了这个待办事项列表。

我希望在关闭窗口或刷新窗口后，todolist 仍然可以从 cookie 中获取之前写入的 todo。但事实是 beforeDestory 钩子(Hook)从未被调用。

Answer 1

刷新窗口时，不会调用组件的 beforeDestroy()，因为您不是以编程方式销毁组件，而是结束整个浏览器 session 。

更好的解决方案是在组件中的 todos 对象发生变化时简单地调用 myStorage.setTodos 。您可以通过为计算属性设置观察器来做到这一点:

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

或者，您可以让 VueX 存储处理存储。从您的问题中不清楚您是否正在改变 todos 状态:如果您正在改变它，您也可以在商店中执行 myStorage.setTodos 。从这个意义上说，实际的组件可能是愚蠢的，因此它所需要做的就是更新存储。