uni-app两个入口模块(客户端和用户端)

思路:使用vuex对小程序进行登录状态管理,采用集中式存储管理应用的登录状态

Vuex 是什么? | Vuex

效果:

uni-app两个入口模块(客户端和用户端)_第1张图片uni-app两个入口模块(客户端和用户端)_第2张图片uni-app两个入口模块(客户端和用户端)_第3张图片

新建store文件夹,在文件夹中新建一个index.js文件和一个modules文件夹,modules文件夹中新建一个stormoduls.js文件

uni-app两个入口模块(客户端和用户端)_第4张图片

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import storemoduls from './modules/storemoduls'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		'storemoduls': storemoduls,
	}
})
export default store

 store/modules/stormoduls.js

uni.setStorageSync(key, data)设置缓存数据

uni.getStorageSync(key)获取缓存数据

export default {
	namespaced: true, //命名空间
	state: () => ({
		token: uni.getStorageSync('token') || '',//存储的登录之后获取到的头像昵称
		userinfo: uni.getStorageSync('userinfo') || '{}',//存储的登录之后获取到的头像昵称
		clcl: uni.getStorageSync('clcl') || '',
	}),
	//提交 mutation,更改state的状态
	mutations: {
		updateUserInfo(state, userinfo) {
			state.userinfo = userinfo
			this.commit('storemoduls/saveUserInfoToStorage')
		},
		saveUserInfoToStorage(state) {
			uni.setStorageSync('userinfo', state.userinfo)
		},
		updateToken(state, token) {
			state.token = token
			this.commit('storemoduls/saveTokenToStorage')
		},
		saveTokenToStorage(state) {
			uni.setStorageSync('token', state.token)
		},
		updateclcl(state, clcl) {
			state.clcl = clcl
			this.commit('storemoduls/saveclclToStorage')
		},
		saveclclToStorage(state) {
			uni.setStorageSync('clcl', state.clcl)
		},
	}
}

在main.js中引入

import store from './store'
Vue.prototype.$store = store
const app = new Vue({
	...App,
	store
})

pages.json中的tabBar里我的页面:pages/login/login

 ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])



components/login/login.vue






 /pages/login/barberlogin






components/cellgroup/barberucell.vue






components/cellgroup/clientucell.vue





你可能感兴趣的:(前端)