vue 当多个页面都有同一个请求时可以利用vuex存储请求的结果

第一步：把异步请求写在actions中，而修改state的状态只能在mutations中，所以需要在action中需要把请求回来的结果提交mutations修改state的状态。

// mine.js
// 引入axios
import { myRequest } from '../.././router/axios'
const mine = {
  namespaced: true, //开启命名空间
  state: {
    // 小区列表
    villageList: []
  },
  mutations: {
    // 给小区列表赋值
    setVillageList(state, payload) {
      state.villageList = payload
    }
  },
  actions: {
    async getVillageList(context, payload) {
      const {
        data: { village }
      } = await myRequest(payload)
      context.commit('setVillageList', village)
    }
  }
}
export default mine

第二步：在store的index.js 中引入mine.js

// index.js
import mine from './modules/mine'
import createPersistedState from 'vuex-persistedstate' // store中的数据持久化
Vue.use(Vuex)
const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      reducer: state => ({
        // 指定持久化数据
        mine: {
          villageList: state.mine.villageList
        }
      })
    })
  ],
  modules: {
    mine
  },
})
export default store

第三步：在main.js中引入store

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第四步：在组件中运用，如果你要在当前页面请求并拿到请求结果并做操作，记得用async await

async created() {
//这里的this.$helper.validatenull()是我判断这个值是否是空的 
    if (this.$helper.validatenull(this.$store.state.mine.villageList)) {
      await this.$store.dispatch('mine/getVillageList', this.$api.getSelectItem)
      this.villageList = [
        { name: '全部小区', id: 0 },
        ...this.$store.state.mine.villageList
      ]
    } else {
      this.villageList = [
        { name: '全部小区', id: 0 },
        ...this.$store.state.mine.villageList
      ]
    }
  },

// 第二种写法
import { mapActions,mapState } from 'vuex'
async created() {
//这里的this.$helper.validatenull()是我判断这个值是否是空的 
   if (this.$helper.validatenull(this.villageList)) {
     await this.getVillageList(this.$api.getSelectItem)
   }
},
computed: {
  ...mapState('mine', ['villageList'])
},
methods: {
    ...mapActions('mine', ['getVillageList']),
}