uni-app Vuex 中的数据和页面数据不同步

uni-app Vuex 中的数据和页面数据不同步

项目信息 描述
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 12.3.1
HBuilderX类型 正式
HBuilderX版本号 3.3.13
手机系统 全部
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

小米8 MIUI 12.5.1 iPhone SE gen 2 15.4.1

操作步骤：

export async function updateMyPlates() {  
    const [, result] = await getMyPlates();  

    const ready = result != null;  

    if (ready) {  
        store.commit('setMyPlates', result);  
    };  

    return ready;  
}

computed: {  
    ...mapState(['myPlates']),  
    showAddPlateButton() {  
        return this.myPlates.length < MAX_PLATE_COUNT;  
    },  
},

<view class="my-plate-item-wrapper" v-for="item in myPlates" :key="item.id">
    <view class="my-plate-item">
        <text class="my-plate-number">{{item.carNumber}}·{{item.color}}</text>
        <view class="my-plate-unbind-icon-extend-click" @click="onRemoveClick(item.carNumber, item.id)">
            <image class="my-plate-unbind-icon" src="../../static/close.png" mode="aspectFit"></image>
        </view>
    </view>
</view>

预期结果：

Vuex 中的数据于页面正常同步

实际结果：

Vuex 中的数据和页面不同步

bug描述：

Vuex 数据不同步至页面，而且还没有报错。微信小程序中正常。页面第一次打开时数据能正常获取，再次更新Vuex中的数据就无法获取到最新数据了。

Image 1 Image 2


更多关于uni-app Vuex 中的数据和页面数据不同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

顶顶

更多关于uni-app Vuex 中的数据和页面数据不同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html


顶顶

顶顶

请上传一个能重现问题的测试工程

稍等

已上传

工程已上传

解决了，关闭纯 nvue 关闭 fast .nvue 文件全改成 .vue 文件 vuex 就正常了。 浪费了三天时间，把所有业务有可能抛异常的地方全部wrapper了一下还是没能解决这个问题，最后关掉就好了，虽然慢了些，但是还能接受。css属性也支持得更多了，人也轻松了。

在 uni-app 中使用 Vuex 时，如果发现 Vuex 中的数据和页面数据不同步，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 确保 Vuex 状态已正确初始化

确保你在 Vuex 的 state 中正确初始化了数据。如果 state 中的数据没有正确初始化，页面可能无法正确获取到数据。

// store.js
export default new Vuex.Store({
  state: {
    count: 0 // 确保 state 中的数据已正确初始化
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

2. 确保页面正确获取 Vuex 状态

在页面中，确保你通过 mapState 或 this.$store.state 正确获取了 Vuex 的状态。

<template>
  <view>
    <text>{{ count }}</text>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count']) // 确保正确映射了 Vuex 状态
  }
}
</script>

3. 确保 Vuex 状态更新后页面重新渲染

Vuex 的状态更新后，页面应该会自动重新渲染。如果页面没有重新渲染，可能是因为你没有正确使用 Vuex 的 mutations 或 actions 来更新状态。

// 在组件中调用 Vuex 的 action 来更新状态
this.$store.dispatch('increment')

4. 检查 Vuex 的严格模式

如果你在 Vuex 中启用了严格模式（strict: true），确保所有的状态变更都通过 mutations 进行。直接修改 state 会导致警告，并且可能导致状态不同步。

// store.js
export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 开发环境下启用严格模式
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

5. 检查异步操作

如果你在 Vuex 的 actions 中执行了异步操作（如 API 请求），确保在异步操作完成后正确提交了 mutations。

// store.js
export default new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload
    }
  },
  actions: {
    fetchData({ commit }) {
      return api.getData().then(response => {
        commit('setData', response.data) // 确保在异步操作完成后提交 mutation
      })
    }
  }
})

6. 检查组件生命周期钩子

如果你在组件的生命周期钩子（如 mounted）中获取 Vuex 状态，确保在状态更新后组件能够正确响应。

<script>
export default {
  mounted() {
    this.$store.dispatch('fetchData') // 在组件挂载时获取数据
  },
  computed: {
    data() {
      return this.$store.state.data // 确保 computed 属性正确获取 Vuex 状态
    }
  }
}
</script>

7. 检查 Vuex 模块化

如果你使用了 Vuex 的模块化功能，确保在获取状态时正确指定了模块路径。

// store.js
const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA
  }
})

// 在组件中获取模块状态
<script>
export default {
  computed: {
    count() {
      return this.$store.state.a.count // 确保正确获取模块状态
    }
  }
}
</script>
回到顶部