APP项目问题总结（+企业状态）-CSDN博客

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/117808078

本文探讨了一个专利应用程序中的路由缓存与Vuex状态管理问题，特别是在涉及专利列表、专利详情及企业详情页面之间的跳转时，如何正确处理缓存与状态同步，确保用户界面与后台数据的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP项目问题总结（+企业状态）

项目背景介绍

项目背景介绍

index页面下有四个子路由，其中一个是专利列表
专利列表（+企业）-------专利详情（+企业）
专利列表（+企业）-------企业详情（+企业）------专利详情（+企业）
专利列表（+企业）-------专利详情（+企业）-------企业详情（+企业）

一、代码

1. index代码（index）

  beforeRouteLeave(to, from, next) {
        if (
            to.path.indexOf('companyDetails') > -1 ||
            to.path.indexOf('patentDetails') > -1 ||
        ) {
            this.$store.commit('SET_KEEP_ALIVE', ['index'])
        } else {
            this.$store.commit('SET_KEEP_ALIVE', [])
        }
        next()
    },

index页面去 --------专利列表和企业详情就缓存index

2.专利详情代码（patentDetails）

 beforeRouteLeave(to, from, next) {
        if (to.path.indexOf('patentList') > -1) {
            this.$store.commit('SET_KEEP_ALIVE', ['index'])
        } else if (to.path.indexOf('companyDetails') > -1) {
            this.$store.commit('SET_KEEP_ALIVE', ['index'])
        } else {
            this.$store.commit('SET_KEEP_ALIVE', [])
        }
        next()
    },

专利详情页面去 --------专利列表和企业详情就缓存index（index页面下有四个子路由，其中一个是专利列表）

3.企业详情代码（companyDetails）

 beforeRouteLeave(to, from, next) {
        if ( to.path.indexOf('patentList') > -1) {
            this.$store.commit('SET_KEEP_ALIVE', ['index'])
        } else if (to.path.indexOf('patentDetails') > -1) {
            this.$store.commit('SET_KEEP_ALIVE', ['index'])
        } else {
            this.$store.commit('SET_KEEP_ALIVE', [])
        }
        next()
    },

企业详情页面去 --------专利列表和专利详情就缓存index（index页面下有四个子路由，其中一个是专利列表）

4.专利详情和企业详情点击+企业代码（patentDetails，companyDetails）

//====================企业详情+企业
  addMyCustomerFun() {
            if (this.companylist.customerFlag) { //判断现在是+企业还已加入状态
                delMyCustomer(this.companylist.id).then(() => {
                    Toast('取消成功！')
                    this.$set(this.companylist, 'customerFlag', 0) //修改当前页面的+企业状态
                    this.$store.commit('SET_PATENTFALG', this.companylist) // 向vuex存储+企业后的数据
                })
            } else {
                addMyCustomer({ enterpriseId: this.companylist.id }).then(() => {
                    Toast('加企业成功！')
                    this.$set(this.companylist, 'customerFlag', 1)
                    this.$store.commit('SET_PATENTFALG', this.companylist)
                })
            }
        },
 // ===================专利详情+企业
 addMyCustomerFun(focusItem, index) {
            if (focusItem.customerFlag) {
                delMyCustomer(focusItem.enterpriseId).then(() => {
                    Toast('取消成功！')
                    this.$set(this.detailsData.focusList[index], 'customerFlag', 0)
                    this.$store.commit('SET_PATENTFALG', this.detailsData)
                })
            } else {
                addMyCustomer({ enterpriseId: focusItem.enterpriseId }).then(() => {
                    Toast('加企业成功！')
                    this.$set(this.detailsData.focusList[index], 'customerFlag', 1)
                    this.$store.commit('SET_PATENTFALG', this.detailsData)
                })
            }
        },

5.专利列表代码（patentList）

 activated () {
    document.documentElement.scrollTop = this.$route.meta.scrollTop //
    if (this.$store.state.patentFlag.focusList) {//专利详情里修改企业关注状态
      let ID = this.$store.state.patentFlag.id
      let FLAG = this.$store.state.patentFlag.focusList[0]
      this.patentList.forEach((item, index) => {
        if (item.id == ID && item.focusList[0].enterpriseId == FLAG.enterpriseId) {
          this.$set(
            this.patentList[index].focusList[0],
            'customerFlag',
            FLAG.customerFlag
          )
        }
      })
    }
    if (this.$store.state.patentFlag.id) {//企业详情里修改企业关注状态
      let ID = this.$store.state.patentFlag.id
      let FLAG = this.$store.state.patentFlag.customerFlag
      this.patentList.forEach((item, index) => {
        if (item.focusList[0].enterpriseId == ID) {
          this.$set(this.patentList[index].focusList[0], 'customerFlag', FLAG)
        }
      })
    }
  },

这样会有一个问题

在专利列表中，进入A专利详情+企业，这个时候vuex中SET_PATENTFALG有值（已加入），回到专列列表A专利是(已加入），如果我在专利列表中点击A专利（未加入）（专利列表被缓存了），进入专利详情（未加入），但是vuex中是（已加入），专利列表A专利就（已加入），是因为没有清空vuex中SET_PATENTFALG的值

如果在专利详情和企业详情created中清空SET_PATENTFALG有值（this.$store.commit(‘SET_PATENTFALG’, {})），还是会出现问题
当我在专利列表 A专利（未加入）----专利详情点击加入（已加入）------企业详情（已加入）-------专利详情（已加入）但是vuex中SET_PATENTFALG有值已经清空了

二、改进代码

1.专利详情代码（patentDetails）

 beforeRouteEnter(to, from, next) {
        if (from.path.indexOf('companyDetails') > -1) {
            // console.log('保留SET_PATENTFALG')
        } else if (from.path.indexOf('patentList') > -1) {
            const store = from.matched[0].instances.default.$store
            store.commit('SET_PATENTFALG', {})
        }
        next()
    },

专利详情页面来自哪个页面，如果是来自企业详情，我就保存vuex中的值，如果来自专利列表，我就清空vuex中的值

2.企业详情代码（companyDetails）

   beforeRouteEnter(to, from, next) {
        if (from.path.indexOf('patentDetails') > -1) {
            // console.log('来自bidDetails')
        } else if (from.path.indexOf('patentList') > -1) {
            const store = from.matched[0].instances.default.$store
            store.commit('SET_PATENTFALG', {})
        }
        next()
    },

企业详情页面来自哪个页面，如果是来自详情，我就保存vuex中的值，如果来自专利列表，我就清空vuex中的值

还有一个问题

在安卓没有问题，在ios有问题，是因为get请求缓存

3.请求拦截器（axios）

//请求拦截
service.interceptors.request.use(
    config => {
        config.method = config.method || 'get'
        if (config.method == 'get' && !config.params) { //get请求，无参数
            config.params = { f_rnd: new Date().getTime() }
        }
        if (config.method == 'post' && config.params) { //post 请求有参数 （+企业）
            config.params = { f_rnd: new Date().getTime() }
        }
        if (config.method == 'delete' && !config.params) { //delete 请求无参数 （删企业）
            config.params = { f_rnd: new Date().getTime() }
        }
        if (config.params) {
            config.params.f_rnd = new Date().getTime()
        }
        if (!config.noToken) {
            config.headers['token'] = store.state.info.token
            config.headers['X-APP-ID'] = process.env.VUE_APP_appId
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

三、终极版本

在每次专利列表请求数据的时候情况vuex中的patentFlag，每次+企业保持enterpriseId和customerFlag，放到vuex中最新当前的+企业状态

1.VUEX（store.index.js）

 patentFlag: [],
 mutations:{
  SET_PATENTFALG(state, val) {
            state.patentFlag = val
        },
 }

2.专利列表代码（patentList）

 //在每次获取专利列表时候情况‘SET_PATENTFALG’
  this.$store.commit('SET_PATENTFALG', [])

activated() {
        document.getElementsByClassName('view')[0].scrollTop = this.$route.meta.scrollTop
        if (this.$store.state.patentFlag) {
            this.patentList.forEach((item, index) => {
                this.$store.state.patentFlag.forEach(item1 => {
                    if (item.focusList[0].enterpriseId == item1.ID) {
                        this.$set(this.patentList[index].focusList[0], 'customerFlag', item1.FLAG)
                    }
                })
            })
        }
    },

3.专利详情（patentDetails）和企业详情（companyDetails）

this.TEMPARR=[]
created() {
        this.TEMPARR = this.$store.state.patentFlag
 }
 //点击+企业和取消企业逻辑
 //每次传值就传enterpriseId和customerFlag
addMyCustomerFun(focusItem, index) {
            if (focusItem.customerFlag) {
                delMyCustomer(focusItem.enterpriseId).then(() => {
                    Toast('取消成功！')
                    this.$set(this.detailsData.focusList[index], 'customerFlag', 0)
                    if (!this.TEMPARR.length) {
                        this.TEMPARR.push({
                            ID: focusItem.enterpriseId,
                            FLAG: 0,
                        })
                    } else {
                        this.TEMPARR.forEach((item, index) => {
                            if (item.ID == focusItem.enterpriseId) {
                                this.$set(this.TEMPARR, index, {
                                    ID: focusItem.enterpriseId,
                                    FLAG: 0,
                                })
                            } else {
                                this.TEMPARR.push({
                                    ID: focusItem.enterpriseId,
                                    FLAG: 0,
                                })
                            }
                        })
                        //去重
                        this.TEMPARR = [...new Set(this.TEMPARR.map(item => JSON.stringify(item)))]
                        this.TEMPARR = this.TEMPARR.map(item => JSON.parse(item))
                    }
                    this.$store.commit('SET_PATENTFALG', this.TEMPARR)
                })
            } else {
                addMyCustomer({ enterpriseId: focusItem.enterpriseId }).then(() => {
                    Toast('加企业成功！')
                    this.$set(this.detailsData.focusList[index], 'customerFlag', 1)
                    if (!this.TEMPARR.length) {
                        this.TEMPARR.push({
                            ID: focusItem.enterpriseId,
                            FLAG: 1,
                        })
                    } else {
                        this.TEMPARR.forEach((item, index) => {
                            if (item.ID == focusItem.enterpriseId) {
                                this.$set(this.TEMPARR, index, {
                                    ID: focusItem.enterpriseId,
                                    FLAG: 1,
                                })
                            } else {
                                this.TEMPARR.push({
                                    ID: focusItem.enterpriseId,
                                    FLAG: 1,
                                })
                            }
                        })
                        this.TEMPARR = [...new Set(this.TEMPARR.map(item => JSON.stringify(item)))]
                        this.TEMPARR = this.TEMPARR.map(item => JSON.parse(item))
                    }
                    this.$store.commit('SET_PATENTFALG', this.TEMPARR)
                })
            }
  },