1、引入vuex,在项目根目录创建文件夹store,并创建文件index.js(uni-app有内置了vuex,所以直接引入就可以了)
2、在全局入口文件main.js引入Vuex
import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
store
})
app.$mount()
3、在store.js定义内容,ApiRequest.js文件看附件代码
import Vue from 'vue';
import Vuex from 'vuex';
import ApiRequest from '../utils/ApiRequest.js';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {},
//state:定义属性
state: {
resInfo:{} // 基本信息
},
//可以动态改变state属性值的内容
mutations: {
setResInfo(state,data){
state.resInfo= data || {}
}
},
//异步获取目标数据后传到mutations,由其操作,使他处可以调用state属性值
actions: {
getResInfo: async function (context, token) {
return await new Promise((resolve, reject) => {
ApiRequest.get('/user/info').then((res) => {
//引用mutations定义的函数,将接口获取到的数据赋给其data参数
context.commit('setResInfo', res.data);
resolve(res);
});
});
},
});
export default store;
//附件
import store from '@/store'
const Fly = require('flyio/dist/npm/fly');
let http = new Fly();
http.config = {
parseJson: true,
timeout: '1500000',
};
http.interceptors.request.use((request) => {
request.baseURL = store.state.baseURL;
request.headers['Authorization'] = store.state.Authorization || '';
uni.showLoading({
title: '加载中',
});
return request;
});
http.interceptors.response.use(
(response) => {
uni.hideLoading();
if (response.status != 200) {
uni.showToast({
title: response.statusText,
icon: 'none',
mask: true,
duration: 3000,
});
}
if (response.data.code != 200) {
//业务数据处理失败
if(response.data.msg){
uni.showToast({
title: response.data.msg,
icon: 'none',
mask: true,
duration: 3000,
});
}
}
return response.data;
},
(err) => {
uni.hideLoading();
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 3000,
});
//发生网络错误后会走到这里
}
);
const fetch = http;
export default fetch;
4、要想拿到数据就要先调用store.js里面的actions模块的getResInfo并执行,只有这样,store仓库才有数据。仓库有数据后,我们就可以任意调用了。
//获取=>存储
mounted(){
//使用this.$store.dispatch调用getResInfo执行获取数据并存进仓库
this.$store.dispatch('getResInfo');
},
//2、使用仓库值
//方法一:使用this.$store.state直接调用
export default {
data () {
return {
data:this.$store.state.resInfo;
}
}
}
//方法二:
import { mapState } from 'vuex';//1.引入mapState
export default {
data () {
return {
...mapState(['resInfo']),//2.接着引入resInfo
data:this.resInfo['name'];//3.再接着调用resInfo
}
}
}