账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue中router-link之前进行了点击事件，点击事件中需要触发vuex里面的修改状态的mutations，数据错误了
    41
    0
    1. 我在导航里面用li包裹了router-link，然后在li上加了点击事件，该点击事件触发之后会改变store里面的一个状态的值，然后跳转路由之后，再根据新的值去发送请求获取数据，现在的问题是，我在频繁切换两个导航菜单的时候，数据出现了混乱，A页面的数据加载到了B页面，经查询是因为在进入B页面的时候，store里面的值并没有改变，而是过了一会才变成点击事件触发之后的值？

    导航

    <li v-for="(item,index) in modelsInfo_real" v-if="item.status == 1" :key="index" @click="changeModel(item,index)">
    <router-link :to="item.path"></router-link>
</li>

    点击事件

    changeModel(module, index) {
      
      // vuex mutations方法
      this.setCurModelInfo(module);

      this.setActiveChanelIndex(index);
      sessionStorage.setItem("first", index);
    },

    错误的数据（来自于chrome console）其中channel_id就是我在上面changeModel中需要在跳转路由前就写进store中的数值

    modelvideo3--this.channel_id 245

modelvideo3--this.channel_id 246

    预期的结果
    希望跳转链接之后，直接获取到的数据就是改变后的channel_id值

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 不许吃香菜 普通会员 1楼

      在Vue中，如果在路由链接点击事件中需要触发Vuex中的修改状态的mutations，数据错误了，首先你需要确保你的代码是正确的。然后，你可以使用beforeRouteUpdate钩子来在组件的beforeRouteUpdate方法中调用Vuex的commit方法。

      以下是一个简单的例子：

      ```js import Vue from 'vue' import Vuex from 'vuex'

      Vue.use(Vuex)

      export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAction({ commit }) { commit('increment') } }, beforeRouteUpdate(to, from, next) { if (from.name === 'myRoute') { next() } } }) ```

      在这个例子中，我们在beforeRouteUpdate钩子中检查了从的路由名是否为myRoute。如果是，我们就调用next()函数，这样Vue.js就会立即跳转到新的路由，而不会在页面上等待next()函数完成。

      如果你的数据错误，你需要检查你的数据更新操作。如果你的代码中存在错误，那么错误可能会被路由跳转掉，而不会在Vuex中被更新。你需要检查你的代码，确保它没有出错。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部