vueX中getter慢一拍怎么回事？？

  1. 渲染组件

img

img

img

2.vueX数据

img

img


3.操作组件

img

img


为什么就慢一拍，切换路由之后就可以正常渲染了

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7552221
  • 这篇博客也不错, 你可以看下vuex getters计算属性
  • 除此之外, 这篇博客: vuex的使用方法中的 getter 获取数据的 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • getters 也是一个对象，用来获取状态的
    • getters 里面存放的还是方法
    const getters = {
}
export default getters
  • 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 Vuex模块化管理小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    根据参考资料和问题描述，可知这是在使用vueX的getter时出现了渲染延迟的问题，需要进一步优化。由于没有提供使用的vueX版本、getter的使用场景、getter中所取数据的大小等细节信息，以下给出两种基本优化方案：

    1.使用computed属性替代getter： getter 是一种计算属性，可以在getter中获取store中的状态，并进行一些操作返回一个新值。提供状态的派生，使其从 store 中的响应式状态哪里接收并返回一个新的计算值。但是使用getter会导致组件不得不重新渲染，造成页面出现一段时间的“自由练习”，延迟了渲染，提高了用户等待的时间。因此，使用computed属性替代getter，可以解决渲染延迟问题。

    实现方式：

    (1)getter的写法

    原先getter写法，如下：

    //  vuex的 计算属性  本质还是函数， 需要通过return 返回数据
getters: {
    myGetter(state){
        return state.a + state.b
    }
}

    修改getter写法，如下：

    //  vuex的 计算属性  本质还是函数， 需要通过return 返回数据
getters: {
    myGetter(state){
        return state.a + state.b
    }
}

    (2)computed属性的写法

    把getter改成computed属性，如下：

    computed:{
    myGetter(){
        return this.$store.state.a + this.$store.state.b
    }
}

    2.通过mutation改变getter的值： 当getter值被设置好后，如果要修改getter值，我们必须用mutation来修改store，再结合computed属性的特性实现实时变化的getter值。

    实现方式：

    (1)getter的写法：

    getters:{
    getVal:state=>{
        return state.value
    }
}

    (2)mutation的写法：

    mutations:{
    setVal(state,payload){
        state.value = payload
    }
}

    (3)actions的写法：

    actions: {
    async fetchData({ commit }) {
        const data = await fetchSomeData()
        commit('setVal', data.value) //调用mutation修改store值 
    }
}

    (4)在组件中使用getters的地方，不需要做任何修改。引入getters即可。

    至此，两种基本的优化方案都已经介绍完毕，如果以上方案不能解决问题，建议提供更多详细信息。