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

Posted 2023-02-15

【中文标题】为啥我的 Stimulus JS 控制器会触发两次？

【英文标题】：Why is my Stimulus JS controller firing twice?为什么我的 Stimulus JS 控制器会触发两次？

【发布时间】：2021-06-11 13:32:04

【问题描述】：

所以，我有一个安装了 webpacker、vue、turbolinks 和刺激 js 的 Rails 应用程序。 我遇到的问题是，即使控制器只导入一次，即使我暂时禁用 turbolinks 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 被打印两次

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

【问题讨论】：

我不知道为什么，但我认为 vuejs 导致了这个。

你可能给他们打了两次电话。发布 application.js。

我不这么认为@sam，否则我会在第一页加载时得到相同的结果。仅当我重新加载时才会发生这种情况

这里有同样的问题。我有一个基本的“你好”控制器，它记录“你好，刺激”。我只有一个数据控制器，它在第一页重新加载时触发一次，然后每次重新加载时触发两次。

【参考方案1】：

这可能是由于 Turbolinks。当导航到新页面时，Turbolinks 首先呈现页面的缓存版本（第一次刺激连接），然后用实际请求的页面版本替换正文（第二次刺激连接）。有关详细信息，请参见此处：

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