详细讲解vue2+vuex+axios

 new Vue({
 el: '#app',
 router,
 store,
 template: '',
 render: (createElement) => createElement(App)
 })

 import axios from 'axios'
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 axios.defaults.baseURL = '后台接口公共前缀';
 export function fetch(url, params) {
  return new Promise((resolve, reject) => {
   axios.post(url, params)
    .then(respOnse=> {
    resolve(response.data);
 })
 .catch((error) => {
  reject(error);
  })
 })
 }
 export default {
 // 获取我的页面的后台数据
  mineBaseMsgApi() {
  // alert('进入api.js')
   return fetch('/api/getBoardList');
  },
  commonApi(url, params) {
  return fetch(url, params)
  }
 }

 // 组装模块并导出 store 的文件
 import Vue from 'vue'
 import Vuex from 'vuex'
 import mine from './modules/mine';
 import club from './modules/club';
 Vue.use(Vuex);
 // 导出需要的模块
 export default new Vuex.Store({
  modules: {
   club,
   mine
  }
 });

 created() {
  // 保存ID到vuex，在购买页面使用
  this.$store.dispatch('storeMovieID',this.$route.params.ID)——（“action名”，data）;
  api.commonApi('url','params')
   .then(res => {
    this.backMsg = res.data;
    console.log(this.backMsg);
    console.log('调用封装后的axios成功');
   })
 },

 const actiOns= {
  // 保存ID storeMovieID为上面的"action名"
  storeMovieID({ commit }, res) {
   //此处是触发mutation的 STORE_MOVIE_ID为"mutation名"
   commit(types.STORE_MOVIE_ID, res);
  },
 }

// ID 变量名（大写）=‘常量名（大写）'
export const STORE_MOVIE_ID = 'STORE_MOVIE_ID';

//mutation名常量定义 并且需要在type.js文件下定义常量
const mutatiOns= {
 // 修改ID 中括号代表常量 [types.常量名]
 [types.STORE_MOVIE_ID]( state, res) {
  state.movieID = res;  //state.数据名 = data
 },
}

const state = {  //采用 数据名：初始值的格式
 contextPathSrc: '后台接口公共部分',
 movieID: '',
}

import api from './../../fetch/api';
import * as types from './../types.js';
// state 是vuex 保存数据的，就相当于vue里的data
const state = {
 contextPathSrc: '后台接口公共部分',
 movieID: '',
}
const actiOns= {
 // 保存ID storeMovieID为上面的"action名"
 storeMovieID({ commit }, res) {
  //此处是触发mutation的 STORE_MOVIE_ID为"mutation名"
  commit(types.STORE_MOVIE_ID, res);
 },
}
const getters = {
 // 图片公共 src 的获取 getter函数：state=> state.数据名
 getContextPathSrc: state => state.contextPathSrc,
 // 获取ID
 movieID: state => {
  if(state.movieID == ''){
   return localStorage.getItem('STORE_MOVIE_ID');
  }else{
   return state.movieID;
  }
 },
}
//mutation名常量定义 并且需要在type.js文件下定义常量 mutations 用来向state提交数据的，只能进行同步操作
const mutatiOns= {
 // 修改ID 中括号代表常量 我们可使用ES2015风格的计算属性命名功能来使用一个常量[types.STORE_MOVIE_ID]作为函数名
 [types.STORE_MOVIE_ID]( state, res) {
  state.movieID = res;
 },
}
export default {
 state,
 actions,
 getters,
 mutations
}

import { mapGetters } from 'vuex';

 computed: {
 ...mapGetters([//...函数名 使用对象展开运算符将此对象混入到外部对象中
  'getContextPathSrc'
  ])
 },

 const getters = {
  // 图片公共 src 的获取 getter函数：state=> state.数据名
  getContextPathSrc: state => state.contextPathSrc,
 }

 return localStorage.getItem('STORE_MOVIE_ID')