new Vue({
el: '#app',
router,
store,
template: '<App/>',
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')
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有