橙子建站链接/seo社区

我在制作网页时遇到一个问题：在多个Vue组件中频繁调用同一个接口/company/info，导致重复请求，想要减少访问次数。

首先，我需要分析问题的根源。在首页、底部组件以及其他页面都调用了这个接口，每次组件加载时都会发起请求，这样确实会造成资源浪费，尤其是在数据不常变化的情况下。

使用Vuex进行状态管理是一个不错的选择。将公司信息存储在全局状态中，各个组件通过状态获取数据，而不是各自发起请求。这需要设置Vuex的store，创建一个模块来管理公司信息的状态、actions和mutations。当应用初始化时，或者在需要的时候，触发一次数据获取，之后所有组件都从store中读取数据，避免重复请求。

下面是实施步骤：

1.安装Vuex（如果尚未安装）

npm install vuex --save

2.创建store模块

在路径src/store/modules新建company.js文件，加入下面代码

// src/store/modules/company.js
const state = {info: null,lastFetch: 0
}const mutations = {SET_COMPANY_INFO: (state, info) => {state.info = infostate.lastFetch = Date.now()}
}const actions = {async fetchCompanyInfo({ commit, state }) {// 1小时内缓存策略if (Date.now() - state.lastFetch > 3600 * 1000 || !state.info) {const res = await request.get('/company/info')commit('SET_COMPANY_INFO', res)}return state.info}
}export default {namespaced: true,state,mutations,actions
}

3.在根store中注册模块

找到store下的index.js,没有的话可以新建

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import company from './modules/company'Vue.use(Vuex)export default new Vuex.Store({modules: {company}
})

4.在App.vue初始化数据

<script>
export default {created () {this.$store.dispatch('company/fetchCompanyInfo')}
}
</script>

5.在需要的地方引用

有三种使用方法，第一种：使用mapState辅助函数​

import { mapState } from 'vuex'export default {computed: {...mapState('company', ['info'])},mounted() {console.log(this.info) // 直接访问缓存数据}
}

第二种：使用getter实时获取 

export default {computed: {companyInfo() {return this.$store.state.company.info}}
}

第三种：强制刷新数据（需要时使用）​

// 在需要更新缓存时调用
this.$store.dispatch('company/fetchCompanyInfo', { force: true }).then(info => {// 获取最新数据
})