为什么我的Stimulus JS控制器会触发两次？

Question

所以，我有一个使用webpacker、vue、turbolinks和stimulus js的Rails应用程序。
我的问题是，即使控制器只被导入一次，而且即使我暂时禁用turbolinks，在刷新页面时initialize()函数和connect()函数也会被调用两次。
这只发生在我刷新页面时（即第一次访问页面时不会发生，但只有在执行页面重新加载时才会发生）。
奇怪的是，当我离开页面时，disconnect()只被调用了一次。

这很糟糕，因为我需要在initialize中修改DOM，所以元素被添加了两次。 有人知道是什么原因造成这种情况，或者有解决方法吗？

编辑：如请求的application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "stylesheets"
import "controllers"
import "components"

components/index.js

import Vue from 'vue/dist/vue.esm'
import BootstrapVue from 'bootstrap-vue'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(BootstrapVue)
Vue.use(TurbolinksAdapter)

const components = {}
const context = require.context("components", true, /_component\.vue$/)
context.keys().forEach(filename => {
  const component_name = filename.replace(/^.*[\\\/]/, '').replace(/_component\.vue$/, '')
  const component = context(filename).default
  components[component_name] = component
})

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#vueapp',
    mounted() {
      let input = document.querySelector('[autofocus]');
      if (input) {
        input.focus()
      }
    },
    components: { ...components }
  })
})

controllers/index.js

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

在每个文件中，如果我使用console.log，它只会被记录一次......
只有在 stimulus controller 中使用 initialize 或 connect 才会打印两次。

这种情况只发生在我重新加载页面时，而不是第一次访问页面时。

- Anonymus

---

我不确定为什么，但我认为是vuejs引起了这个问题。 - Anonymus

你可能调用了它们两次。请发布application.js文件。 - sam

我不这么认为，@sam，否则我在第一次加载页面时会得到相同的结果。这只会在重新加载时发生。 - Anonymus

这里也有同样的问题。我有一个基本的“hello”控制器，它记录“Hello, Stimulus”。我只有一个数据控制器，在第一次页面重新加载时被触发一次，然后每次重新加载时都会被触发两次。 - pierre_loic

Answer 1

这可能是由于Turbolinks引起的。在导航到新页面时，Turbolinks首先呈现页面的缓存版本（第一次刺激连接），然后用实际请求的页面版本替换页面主体（第二次刺激连接）。详情请参见：

https://mrcodebot.com/turbolinks-calls-stimulus-connect-twice/

- Chris