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){state.token = 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,state,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.$store.commit("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 = requestconst 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){uni.getNetworkType({success:function(res){if(res.networkType==='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 = uni.getStorageSync('token') || "";let openId = uni.getStorageSync("openId");let dataParam = way=='POST'?JSON.stringify(Object.assign(param)):param;let conType = "application/json";if(param.contype == 'form'){dataParam = param;conType = "appliccation/x-www-form-urlencoded"}console.log("返回的openId",openId);uni.request({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(data.data.code===200){res(data.data)}else{if(data.data.code===401){console.log("接口出现401，跳转登录页面path:"+url);let routes = getCurrentPages();let curRoute = routes[routes.length - 1]if(curRoute&&curRoute.route&&(curRoute.route ==='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({title:data.message,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&&callBack.complete){callBack.complete();}if(lasttime=nowtime){setTimeout(function(){uni.hideLoading();},600)}}
)	
}
funtion userAuth(token,openId){uni.login({provider:'weixin',success:function(loginRes){if(loginRes.code){userLogon:result=>{const openid = result.openidconst unionId = result.unionIdif(!openid){this.$api.msg('数据异常，无法进入登录页面')console.log('openid空，无法进入登录页面',result);setTimeout(()=>{uni.switchTab({url:"/pages/index/index"})},3000)return false}uni.redirectTo({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)}
}