uniapp中使用vuex实现缓存登录信息

1.在根目录下新建store目录，store中新建index.js，如图

 

 2.index.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		uerInfo: {},
		hasLogin: false,
		getMsg: {},
		adduser: {},
		addgroup: {},
		msgboxuser: '',
		msgboxgroup: '',
		userstate: '', ///用户状态
		chatTolist: {}, ///当前聊天对话的里面是聊天的对象和
		
	},
	mutations: {
		login(state, provider) {
			state.hasLogin = true
			state.uerInfo.uid = provider.u_id
			state.uerInfo.userName = provider.u_nick_name
			state.uerInfo.avatar = provider.u_avater
			uni.setStorage({
				key: 'uerInfo',
				data: provider
			})
		},
		logout(state) {
			state.hasLogin = false
			state.uerInfo = {}
			uni.removeStorage({
				key: 'uerInfo'
			});
		}

	},
	getters: {
		currentdilog: (state, getters) => {
			return state.chatTolist
		},
		hasLogin: (state, getters) => {
			return state.hasLogin
		},
		userinfo: (state, getters) => {
			return state.uerInfo
		},
		getUerid: (state, getters) => {
			return state.uerInfo.uid
		}
	},
})

export default store

2.配置app.vue

<script>
	import Vue from 'vue'
	import {
		mapMutations
	} from 'vuex';

	export default {
		onLaunch: function() {
			uni.getStorage({
				key: 'uerInfo',
				success: (res) => {
					Object.keys(res.data).length === 0 ? '' : this.login(res.data)
					// 如果还需要重新校验或是想要刷新token的有效时间 就再联网请求一次
					// uni.request({
					// 	url: `${this.$serverUrl}/auth.php`,
					// 	header: {
					// 		"Content-Type": "application/x-www-form-urlencoded",
					// 		"Token":res.data.token
					// 	},
					// 	data: {
					// 		"username":res.data.user_name
					// 	},
					// 	method: "POST",
					// 	success: (e) => {
					// 		if (e.statusCode === 200 && e.data.code === 0) {
					// 			this.login(e.data);
					// 		}
					// 	}
					// })
				}
			});
		},
		onLoad() {
			
		},
		methods: {
			...mapMutations(['login']),
		}
	}
</script>

<style lang="scss">

</style>

3.配置main.js

import Vue from 'vue'
import App from './App'

import store from './store'


Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()

4.页面中调用

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<!-- 判断是否登录 -->
			<text class="title" v-if="hasLogin">{{title}}</text>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: 'Hello',

			}
		},
		onLoad() {
			this.$api.api_getUpdateApp({
				user_id: 'sdfsdfsd',
				name: '测试'
			}).then(res => {
				/* 成功的回调 */
				this.logout(); /* 执行退出登录*/
				this.login(res.data)  /* 执行登录*/
				console.log(this.hasLogin)   /* 判断是否登录 并且可以直接在view中用*/
				console.log(uerInfo)  /* 里面存的是用户的基本信息（和/store/index.js 中的state对应的），也可以直接在view中用*/
				console.log(this.$store.state.uerInfo)  /* 和上边的结果是一样的*/
			}).catch(err => {
				/* 失败回调 */
			}).finish(e => {
				/* 成功或者失败都会执行 */
			})
		},
		methods: {
			...mapMutations(['logout', 'login']),
		}
	}
</script>

<style>
</style>