Просмотр исходного кода

feat: 基础的store不需要模块化

chenyixian 6 месяцев назад
Родитель
Сommit
48babe6a0b

+ 1 - 1
hook/use-preser-member/index.ts

@@ -8,7 +8,7 @@ export const usePreserMember = async () => {
 		isCache: false,
 		isEncrypt: true,
 		hosId: getApp().globalData.districtId || getApp().globalData.hosId,
-		openid: store.state.base.openId,
+		openid: store.state.openId,
 	};
 	let { resp, resData } = await QueryBaseMemberList_V3(queryData);
 	// 请求成功且有返回值保存全局就诊人数据列表

+ 1 - 2
service/request.ts

@@ -30,10 +30,9 @@ const httpPost = (url: string, data: any, options: any = {}, complete = undefine
 	if (showLoading) {
 		common.showLoading();
 	}
-	console.log('request', store.state);
 	let header: any = {
 		'content-type': 'application/json',
-		token: store.state.base.token,
+		token: store.state.token,
 		'call-appId': uni.getStorageSync('frontEndConfig').fixedAppjsGlobalData.appId,
 	};
 	// 如果has 为true 代表当前请求接口需要加密 且获取的加密秘钥不为空

+ 1 - 1
store/modules/base.ts → store/global.ts

@@ -1,4 +1,4 @@
-export const base = {
+export default {
 	state: {
 		token: '',
 		openId: '',

+ 4 - 0
store/hook/index.ts

@@ -0,0 +1,4 @@
+export * from './mapState';
+export * from './mapGetters';
+export * from './mapMutations';
+export * from './mapActions';

+ 13 - 0
store/hook/mapActions.ts

@@ -0,0 +1,13 @@
+import { mapActions as _mapActions, createNamespacedHelpers } from 'vuex';
+import { useActionMapper } from './useMapper';
+
+/**
+ * mapAction
+ * @description 参考 vuex 的 mapAction
+ * https://vuex.vuejs.org/zh/guide/actions.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%88%86%E5%8F%91-action
+ */
+export const mapActions = (map: {}) => {
+	let mapperFn = _mapActions;
+
+	return useActionMapper(map, mapperFn) as any;
+};

+ 13 - 0
store/hook/mapGetters.ts

@@ -0,0 +1,13 @@
+import { mapGetters as _mapGetters, createNamespacedHelpers } from 'vuex';
+import { useStateGetters } from './useMapper';
+
+/**
+ * mapGetters
+ * @description 参考 vuex 的mapGetters
+ * https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0
+ */
+export const mapGetters = (map: {}) => {
+	let mapperFn = _mapGetters;
+
+	return useStateGetters(map, mapperFn) as any;
+};

+ 13 - 0
store/hook/mapMutations.ts

@@ -0,0 +1,13 @@
+import { mapMutations as _mapMutations, createNamespacedHelpers } from 'vuex';
+import { useStateGetters } from './useMapper';
+
+/**
+ * mapMutations
+ * @description 参考 vuex 的mapMutations
+ * https://vuex.vuejs.org/zh/guide/mutations.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%8F%90%E4%BA%A4-mutation
+ */
+export const mapMutations = (map: {}) => {
+	let mapperFn = _mapMutations;
+
+	return useStateGetters(map, mapperFn) as any;
+};

+ 18 - 0
store/hook/mapState.ts

@@ -0,0 +1,18 @@
+import { mapState as _mapState, createNamespacedHelpers } from 'vuex';
+import { useStateMapper, checkType } from './useMapper';
+
+/**
+ * mapState
+ * @description 参考 vuex 的mapState
+ * https://vuex.vuejs.org/zh/guide/state.html#mapstate-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0
+ */
+export const mapState = (map: {}) => {
+	let mapperFn = _mapState;
+	
+	// 如果使用模块化,则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapActions方法
+	// if (checkType(moduleName) === '[object String]' && moduleName.length > 0) {
+	// 	mapperFn = createNamespacedHelpers(moduleName).mapState;
+	// }
+
+	return useStateMapper(map, mapperFn) as any;
+};

+ 50 - 0
store/hook/useMapper.ts

@@ -0,0 +1,50 @@
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+export const useStateMapper = (mapper, mapFn) => {
+	const store = useStore();
+
+	const storeStateFns = mapFn(mapper);
+
+	const storeState = {};
+	Object.keys(storeStateFns).forEach((fnKey) => {
+		// vuex源码中mapState和mapGetters的方法中使用的是this.$store,所以更改this绑定
+		const fn = storeStateFns[fnKey].bind({ $store: store });
+		storeState[fnKey] = fn();
+	});
+
+	return storeState;
+};
+
+export const useStateGetters = (mapper, mapFn) => {
+	const store = useStore();
+
+	const storeStateFns = mapFn(mapper);
+
+	const storeState = {};
+	Object.keys(storeStateFns).forEach((fnKey) => {
+		// vuex源码中mapState和mapGetters的方法中使用的是this.$store,所以更改this绑定
+		const fn = storeStateFns[fnKey].bind({ $store: store });
+		storeState[fnKey] = fn;
+	});
+
+	return storeState;
+};
+
+export const useActionMapper = (mapper, mapFn) => {
+	const store = useStore();
+
+	const storeActionsFns = mapFn(mapper);
+
+	const storeAction = {};
+
+	Object.keys(storeActionsFns).forEach((fnKey) => {
+		storeAction[fnKey] = storeActionsFns[fnKey].bind({ $store: store });
+	});
+
+	return storeAction;
+};
+
+export function checkType(value) {
+	return Object.prototype.toString.call(value);
+}

+ 4 - 5
store/index.ts

@@ -1,11 +1,10 @@
 import { createStore } from 'vuex';
-import { base } from './modules';
+import global from './global';
 
 const store = createStore({
-	state: {},
-	modules: {
-		base,
-	},
+	...global,
+	modules: {},
 });
 
+export * from './hook';
 export default store;

+ 0 - 1
store/modules/index.ts

@@ -1 +0,0 @@
-export * from './base';

+ 60 - 0
utils/common.ts

@@ -114,3 +114,63 @@ export const turnToMap = (list) => {
 	});
 	return map;
 };
+/**
+ * 页面跳转  封装使用不同的微信页面跳转方法
+ * @param {string} toUrl 跳转路由
+ * @param {string} skipWay 跳转方法(
+  navigateTo : 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
+  switchTab : 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
+  reLaunch : 关闭所有页面,打开到应用内的某个页面
+  redirectTo : 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
+  )
+ * @param {string} data 
+ */
+export const goToUrl = function (toUrl, data = { skipWay: 'navigateTo', data: '' }) {
+	var menu = [];
+	let num = toUrl.indexOf('?') || 0; // 参数下标
+	let key = toUrl.substr(num == -1 ? toUrl.length : num, toUrl.length); // 获取地址带参
+	let url = toUrl.substr(0, num == -1 ? toUrl.length : num); // 获取地址除去带的参数
+	if (uni.getStorageSync('menuList')) {
+		menu = uni.getStorageSync('menuList');
+	}
+	menu = menu.filter((item) => item.MenuName == 'DiyMenu');
+	if (isNotEmpty(menu) && isNotEmpty(menu[0])) {
+		var diyMenu = menu[0];
+		diyMenu.Children.forEach(function (val, index) {
+			var FromUrl = val.FromUrl;
+			var ToDiyUrl = val.ToUrl;
+			if (url == FromUrl) {
+				url = ToDiyUrl;
+			}
+		});
+	}
+	// 判断是否是传data.data (data.data代表页面值)
+	if (isNotEmpty(data.data)) {
+		if (data.data.indexOf('?') == -1) {
+			url = url + '?' + data.data;
+		} else {
+			url = url + data.data;
+		}
+	}
+	// 判断是否是地址带参
+	if (isNotEmpty(key)) {
+		// 判断是否有http跳转
+		if (key.indexOf('url=') >= 0) {
+			let url_ = key.substr(key.indexOf('url=') + 4);
+			// 传入的url未转码 则转码 已转码 则不处理
+			if (url_ == decodeURIComponent(url_)) {
+				url_ = encodeURIComponent(url_);
+			}
+			key = key.substr(0, key.indexOf('url=') + 4) + url_;
+		}
+		url = url + key;
+	}
+	// 使用微信那种跳转方法
+	let way = data.skipWay || 'navigateTo';
+	uni[way]({
+		url: url,
+		success: () => {
+			// loadSysAppPageMessage(url);
+		},
+	});
+};