Question

在Vue项目中，我正在寻找一种将DOM元素保存到商店的方法。然后，这些元素应使用GSAP进行动画处理。

不幸的是，DOM准备就绪（因此我可以使用document.querySelector）以及Vue的过渡系统启动时存在一些问题。

商店具有以下结构：

const store = new Vuex.Store({
    state: {
        settings: {
            ui: {
               btns: {
                   cBtnNavMain: {
                       el: document.querySelector('.c-btn__nav--main') // does not work, because DOM is not yet ready
                       [...]
                   }
               }
            }
        }
    },
    mutations: {
        // Add DOM element later via a mutation?
        addDomElementToStore: (state, obj) => {
            console.log("MUTATION addDomElementToStore, obj =", obj) // shows `null`
            obj.el = obj.domEl  
        }
    }
}

然后，在App.vue（由main.js加载）中，基本上有以下脚本：

created() {
    console.log("App.vue created")
}
mounted() {
    console.log("App.vue created")
}
methods: {
    beforeEnter(el) {
        console.log("BeforeEnter called, obj")

        // This could be the place to add DOM to the store, but how?
        // I tried a mutations like this (see above in store.mutations):
        this.$store.commit('addDomElementToSettings', {
           el: this.$store.state.settings.ui.btns.cNavMainBtn.el,
           domEl: document.querySelector('.c-btn__nav--main')
        })
        // ...but won't work though, the console shows, obj params are empty
    }
    [...]
}

控制台结果显示如下：

App.vue created
BeforeEnter called // <-- beginEnter before mounted called!
MUTATION addDomElementToStore, obj = {el: null, domElem: null}
App.vue mounted

由于创建后调用了“ beforeEnter”，但是在挂载之前（即可以轻松访问DOM的位置），看来DOM尚未真正可访问。因此，我想，我使用“ beforeEnter”通过突变将新的DOM元素分配给store.settings。但这根本不起作用-而且GSAP最终具有用于制作动画的DOM元素。

要使我的DOM元素保存到设置中，我该怎么办，以便在我要使用GSAP处理DOM元素时不必一直使用document.querySelector？

Answer 1

为什么不尝试使用mounted()生命周期方法来触发以vuex状态存储DOM元素选择的突变？这样一来，您便知道可以选择的东西。

Vue / Vuex / GSAP-Animation：添加DOM元素进行存储

1 个答案: