uniapp的store使用
uniapp的store使⽤store模块化开发
⾸先是⽂档结构：
store⽂件夹默认的⽂件是index.js，这个⽂件相当于主⼊⼝⽂件：
store中Index.js⽂件内容如下：
import Vue from "vue"
import Vuex from "vuex"
import cart from "./modules/cart.js"
import shop from "./modules/shop.js"
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
hasLogin:false,
userInfo:{},
token:"',
openId:"",
path:"xxxxxx",
registerUrl:"xxxxxxxx"
},
getters:{
getOpenId(state){
return state.openId
}
},
mutations:{
setToken(state,payload){
}
近朱者赤近墨者黑},
actions:{
getData({commit},payload){
commit("setToken",payload)
}
},
modules:{
cart,
shop
}
网络音乐排行榜})
export default store
modules下的cart.js⽂件
const state = {
updateCart:true,
cartCount:0
}
const getters = {
getUpdateCart(state){
return state.updateCart
}
}
const mutations = {
setUpdateCart(state,flag){
state.updateCart = Boolean(flag);
}
}
export default{
namespaced:true,
getters,
mutations,
actions
}
这个⽂件还可以写成下⾯的⽅式：
import Vue from "vue"
高压锅皮冻
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
updateCart:true,
cartCount:0
},
getters:{
getUpdateCart(state){
return state.updateCart
}
},
mutations:{
setUpdateCart(state,payload){
state.updateCart = Boolean(payload)
}
},
牛干巴
actions:{
}
})
export default{
namespaced:true,
store
}
调⽤modules中的函数⽅法
this.$storemit("cart/setUpdateCart",true)
调⽤函数的时候需要把模块的名称也加⼊到路径中，这样才可以调⽤到对应的函数。main.js⽂件内容
import Vue from "vue"
import store from "./store"
import App from "./App"
import request from "utils/request.js"
import * as filters from "@/utils/filters"
import {msg} from "@/utils/index.js"
Vue.use(userLogin)
Vue.prototype.$store = store; 这样就可以使⽤this.$store.state来调⽤store中的数据了
Vue.prototype.$request = request
const add = new Vue({
...App
}).$mount()
export default app
request.js⽂件内容
import store from "./store";
import vue from "./main.js";
import {API_BASE_URL} from "@/common/config.js";
var lasttime = 0;
var nowtime = 0;
var auth = false;
var timeId = null;
function urlRequest(url,param,way,res,callBack){
success:function(res){
if(resworkType==='none'){
uni.navigateTo({
url:"/pages/public/noWifi"
})
return
}
}
let d = new Date();
let dval = 0;
let addVal = 0;
if(nowtime){
dval = d.getTime() - nowtime;
if(dval < 500){
addVal += dval;
}
}
if(!param.isWait && (dval > 1000 || addVal === 0)){
console.log("加载⼀次");
}
nowtime = d.getTime();//获取点击时间
let token = StorageSync('token') || "";
let openId = StorageSync("openId");
let dataParam = way=='POST'?JSON.stringify(Object.assign(param)):param;
let conType = "application/json";
pe == 'form'){
dataParam = param;
conType = "appliccation/x-www-form-urlencoded"
}
console.log("返回的openId",openId);
url:API_BASE_URL+url,
data:dataParam,
header:{
"ak":token,
"dk":dk,
"pk":"wbm",
"pt":"web",
"Accept":"application/json",
"Content-Type":conType
},
method:way,
success:(data)=>{
setTimeout(()=>{
uni.hideLoading();
},1500+addVal)
if(de===200){
res(data.data)
}else{
if(de===401){
console.log("接⼝出现401，跳转登录页⾯path:"+url);
let routes = getCurrentPages();
let curRoute = routes[routes.length - 1]
if(curRoute&&ute&&(ute ==='pages/public/login')){
return false
}
clearTimeOut(timeId);
timeId = setTimeout(()=>{
console.log("更新⽤户token");雪狼狗图片
userAuth();
},300)
}
}else{
successWhite.map(WhiteUrl=>{
if(url===WhiteUrl){
res(data.data)
}
})
if(data.status){
uni.showToast({
ssage,
icon:"none",
duration:4000
})
return;
}
uni.showToast({
title:data.data.msg,
icon:"none",
duration:4000
})
}
}
},
fail(data){
if(callBack&&callBack.fail){
callBack.fail(data);
}
setTimeout(()=>{
uni.hideLoading();
},300+addVal)
setTimeout(()=>{
uni.showToast({
title:"数据加载异常",
icon:"none",
duration:1500
})
},4000)
},
complete:()=>{
if(callBack&&callBackplete){
callBackplete();
}
if(lasttime=nowtime){
setTimeout(function(){
uni.hideLoading();
},600)
}
}
)
}
funtion userAuth(token,openId){
uni.login({
provider:'weixin',
success:function(loginRes){
de){
userLogon:result=>{
const openid = result.openid
const unionId = result.unionId
if(!openid){
翡翠林怎么去
this.$api.msg('数据异常，⽆法进⼊登录页⾯')
console.log('openid空，⽆法进⼊登录页⾯',result);                        setTimeout(()=>{
uni.switchTab({
url:"/pages/index/index"
})
},3000)
return false
}
url:"/pages/public/login?openId=${unionId}"
})
}
}
}else{
console.log("400获取code失败",loginRes);
}
})
}
export default{
urlRequest:function(url,param,way,res,callBack){
return urlRequest(url,param,way,res,callBack)
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。