博客

1. 首先我们在根目录下新建一个 store 文件夹，然后在里面新建一个index.js文件
   

2. 里面的内容是，这里我就不讲创建过程了，可以去查下如何使用vuex，我这里写了两个方法，一个登陆保存，一个退出登录清除数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
		hasLogin:false,        //用户是否登录
		userInfo:{}				//用户数据
	},
	 //mutations定义同步操作的方法
    mutations: {
		// 登录
		login(state,user){
		//登录状态为已登录
			state.hasLogin = true
			state.userInfo = user
			//储存用户数据到本地
			uni.setStorage({
				key: 'userInfo',
				data: user,
			});
			console.log('登陆成功')
			console.log(state.hasLogin,state.userInfo)
		},
		
		// 退出登录
		logout(state,user){
			//登录状态为未登录
			state.hasLogin = false
			state.userInfo = {}
			//删除本地储存
			uni.removeSavedFile({
				key: 'userInfo',
			})
			console.log('退出登录')
			console.log(state.hasLogin,state.userInfo)
		}
	},
    actions: {
		
	}
})
export default store

3. main.js里面去挂载

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

import store from './store'   //引入vuex

// 挂载vuex
Vue.prototype.$store = store;

Vue.config.productionTip = false


App.mpType = 'app'

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

4.使用，在登录页面引入vuex



5.在组件中提交 Mutation



登录成功后保存用户数据并执行login方法

success: (res) => {
							console.log(res)
							switch (res.data.msg.status) {
							//登录成功
								case 1:
								//获取用户数据
									let userInfo = {
										userId: res.data.msg.user.userId,
										token: res.data.msg.token,
										phone: res.data.msg.user.userTel,
										userName: res.data.msg.user.userName,
										jurisdiction: res.data.msg.user.roleId,
									}
									//执行vuex里面的登录函数并把用户数据传输过去
									this.login(userInfo)

6.每次进入应用前，由App.vue 中的周期函数进行监听，所以在加载函数中定义方法，从本地缓存中取 出用户数据，然后调用login方法，不需要发起网络登录请求。

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		methods: {
			...mapMutations(['login'])
		},
		
		onLaunch: function() {
			const userInfo = uni.getStorageSync('userInfo');    //同步获取本地数据
			//判断本地缓存是否存在数据
			if (userInfo !=="") {
				//传到vuex里面储存起来,并改变登录状态
				this.login(userInfo)
			}
			
		},
		}

如果想清除登录状态就执行logout那个函数就可以了

import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				user: [],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		
		methods: {
			...mapMutations(['logout']),
			// 是否退出登录
			onremoveLogout() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否退出登录',
					success: function(res) {
						if (res.confirm) {
							that.logout(res)
							that.$link.nav('login')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})
			}
		}
	}

以上就是登录状态储存的全部内容了

小白一个，多多包涵