3

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

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

4

1 回答 1

0

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

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

于 2021-08-16T11:50:36.777 回答