Swiper 应用Vue遇到问题处理记录

Swiper 应用Vue遇到问题处理记录

最近在学习vue，在开发一个需求中发现了一个问题，轮播图图片在语言切换后不更新，解决过程做个记录，错误不足希望靓仔们指教，tank yo!

首先是在组件中引入common文件夹下不同语言下配置的共同的属性

const state = reactive({
    imgs: {
        btnIcon: tc('message.btnIcon'),
    }
})

使用图片

<img class="center-icon" :src="imgs.btnIcon" alt="" srcset="">

图片展示出来，但是并没有随着语言的切换而更新，问题排查后找到原因，需要使用watch监听state变化。

首先我们新建一个文件，存放我们的lanStore

import { createStore } from 'vuex';
const {locale} = i18n.global;
export default createStore({
    state: {
        langchanged: locale
    }
});

注册mutation更改我们的store（不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法）

mutations: {
    langChange(state, payload) {
        state.langchanged = payload;
    }
}

声明一个action（接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。）

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

actions: {
    langChange(mu, payload) {
        mu.commit('langChange', payload);
    }
}

store.dispatch('langChange', curLang);

ok 解决了问题，但是又发现了swiper的一个兼容性问题（不是

切换语言后发现展示的前两张和最后一张图不更新，检查没有报错，debug检查数据流一切正常。（网上小伙伴们反映的都是第一张和最后一张，但是我仔细检查发现确实是前两张都没更新）后来才知道是因为开启了loop,导致动态更新元素的时候缓存的元素不会改变。

在查阅文档的时候发现了两个属性

    observeParents 监听swiper的父元素改变
    observe 监听swiper的及子元素改变

但是没有解决问题，继续搜索 发现了一个回调看起来可以解决问题😌
onSlideChangeEnd(swiper), swiper3开始启用的回调函数，swiper从一个slide过渡到另一个slide结束时执行。可接受swiper实例作为参数。虽然没那么贴切我的需求，但是，本着能用就行的节约精神，先试试

因为项目使用的是swiper5并且Vue3中没有this，我就写成这样子

    on: {
        slideChangeEnd: function(swiper){ 
            swiper.update();
            swiper.reLoop();
        }
    }

果然 还是没有效果！但是我试了下vue2 + swiper4就可以正常更新了，
好难过。知道的朋友可以评论下！然后就是老本行了，操作dom ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

setup(){
   ...
   return {
       updateSwiper
   }
}

updated() {
    this.updateSwiper();
}

然后就是更新dom的函数

const updateSwiper = () => {
        const all = document.getElementsByClassName('s-slide');
        all.forEach((res) => {
            const eleObj = res.attributes['data-swiper-slide-index'];
            const eleIndex = elementInxObj.value;
            res.firstChild.setAttribute('src', state.imgs[`swiper${elementIndex - 0 + 1}`]);
        });
    };

诶嘿，就是舒爽 (指开发人员感受)。

问题是解决了，但是解决方案确实不够优，定位问题思路也需优化。