Vuejs：调用 created() 钩子两次答案

【问题标题】：Vuejs: call created() hook twiceVuejs：调用 created() 钩子两次
【发布时间】：2019-07-18 22:13:40
【问题描述】：

我创建了一个钩子，通过单击按钮从数据库中重新加载我的数据：

<template>
  <base-projects :projects="projects" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  created() {
    projectService.getAllCompanyProjects();
  },

};
</script>

所以效果很好，但前提是我第一次点击。如果我再次单击，它不会再次重新加载数据。有谁知道如何解决这个问题？

提前谢谢你！

【问题讨论】：

created 钩子将在组件创建时被调用一次。如果您想在点击时重新加载数据，您应该在点击时调用组件method。你能提供你的组件代码来解决这个问题吗？
@charlycou 是否可以在创建的钩子中销毁钩子？
为什么要销毁它。如果您需要销毁此钩子，可能是因为您不需要它，因为它在创建组件时触发一次。使用一些代码编辑您的帖子或提供沙箱来重现您的问题。
@charlycou 我更新了代码
谢谢。我发布了一个答案。告诉我这是否有帮助。

标签： javascript vue.js vue-component lifecycle-hook

【解决方案1】：

我假设您的数据是使用projectService.getAllCompanyProjects(); 函数从数据库中重新加载的。由于您想在“点击”时重新加载数据，我建议您将“点击”事件绑定到您的组件方法之一。

<template>
  <base-projects :projects="projects" @click.native="reloadData" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  methods: {
    reloadData() {
      projectService.getAllCompanyProjects();
    }
  }    
};
</script>

reloadData 方法将由您的base-projects 组件的 DOM 上的“单击”触发。

【讨论】：

base-projects 组件不是按钮，所以该方法没有被调用
我使用.native 更新了代码。如果这不适用于您的用例，您需要使用应该触发事件的组件来更新您的帖子。