vue多个页面用到同一个接口的数据，使用vuex

原文链接：blog.csdn.net/weixin_4350…

第一种情况：调用接口不传参数

1、在 store文件夹下的 modules文件夹下新建 getName.js

// getName.js
import { getNameList } from "@/apis/apis";   // 导入接口

export default {
  state: {
    nameList: [] // 名称列表
  },
  mutations: {
    changeNameList(state, payload) {
      state.nameList= payload;
    }
  },
  actions: {
    geName(context) {
      getNameList ({}).then(res => {
        if (res.code == 0) {
          context.commit("changeNameList", res.data);
        } else {
          Message.error(res.message);
        }
      });
    }
  }
};

2、在 store文件夹下 index.js 中引入 getName.js

import getNamefrom "./modules/getName";
export default new Vuex.Store({
  modules: {
      getName
  },
});

3、在整个项目刚开始加载的时候就用 dispatch 分发，这样不管在哪个页面需要使用到都可以使用，比如打开页面首页的时候，在mounted里面就 dispatch 触发geName函数

<script>
export default {
  mounted() {
    this.$store.dispatch('geName')
  },
}

4、如在多个页面都需要使用 nameList ， 以在某一个页面使用为例，其余页面一样用法

<template>
  <div>
     <el-select v-model="form.name" placeholder="请选择名称" clearable>
       <el-option v-for="item in nameList" :key="item.id" :label="item.fieldName" :value="item.fieldName"></el-option>
     </el-select>
  </div>
</template>        
        
<script>
export default {
  computed: {
    nameList() {
      return this.$store.state.getName.nameList
    }
  },
}
</script>

调接口传参数

import movieService from '../services/movieService.js'

export default {
    namespaced: true,
    state: {
        current: 1,
        pageSize: 2,
        total: 0,
        datas: [],
        isLoading: false
    },
    mutations: {  //改变状态的通用方法    设置整个状态
        setState(state, newState) {
            for (const prop in newState) {
                state[prop] = newState[prop]
            }
        }
    },
    actions: {
        fetch(context) {  // 根据当前的分页设置，获取电影
            context.commit("setState", { isLoading: true })     
            movieService.getMovies(context.state.current, context.state.pageSize).then(resp => {
                console.log(resp)
                context.commit("setState", resp)
                context.commit("setState", { isLoading: false })
            })
        }
    }
}

// 在 movieService.js
export default {
    async getMovies(page, pageSize) {
        const datas = await fetch("https://api.myjson.com/bins/15f8x1")
            .then(resp => resp.json())
        return {
            total: datas.length,
            datas: datas.slice((page - 1) * pageSize, page * pageSize)  //返回分页的电影数据
        }
    },
    //通过id获取电影数据
    async getMovie(id) {
        const datas = await fetch("https://api.myjson.com/bins/15f8x1")
            .then(resp => resp.json())
        return datas.find(item => item._id === id)
    }
}

在页面中使用

 mounted() { //远程获取数据
        this.$store.dispatch("movie/fetch")  //出发vuex中movie.js里的action，获取数据
 },