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

Question

所以，我有一个安装了 webpacker、vue、turbolinks 和stimulus js 的 Rails 应用程序。
我遇到的问题是，即使控制器只导入一次，即使我暂时禁用涡轮链接，

initialize()

函数以及

connect()

函数也会被调用两次。
仅当我进行刷新时才会发生这种情况（即不是在我第一次访问该页面时，而是仅在我执行页面重新加载时）。
奇怪的是，

disconnect()

只被调用一次（当我离开页面时）

这很糟糕，因为我需要在初始化时修改 DOM，所以我添加了两次元素。 有人知道导致此问题的原因和/或解决方案吗？

编辑：application.js 按要求

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

import "stylesheets"
import "controllers"
import "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 }
  })
})

控制器/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

它只会被记录一次......
仅在刺激控制器

initialize

或

connect

中打印两次

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

Answer 1

这可能是由于 Turbolinks 造成的。导航到新页面时，Turbolinks 首先呈现页面的缓存版本（第一个刺激连接），然后用页面的实际请求版本（第二个刺激连接）替换正文。更多详情请看这里：

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

Answer 2

您可以这样做以防止调用 connect 两次：

export default class extends Controller {
  connect() {
    if (document.documentElement.hasAttribute('data-turbo-preview')) {
      return;
    }
    // ...
  }
}

这样第一个

connect

调用的执行将被忽略。

注意：turbolinks 属性为

data-turbolinks-preview

，turbo 属性为

data-turbo-preview