vuex基础入门:uniapp实现用户登录授权实战

1.背景

    vuex是数据共享方案之一,本文以微信小程序登录授权为例介绍一下vuex常用属性state、getters、mutations、actions.

2.基于uniapp实现微信小程序登录授权流程

    1.凡是需要用户登录授权信息的页面创建时created方法中需要判断用户是否登录,需要使用本地缓存的token调用服务端接口返回用户信息,如果没有则需要进行微信授权.
    2.判断用户是否授权,微信小程序官方文档api:wx.getSetting，返回值中只会出现小程序已经向用户请求过的权限.如果拒绝则登录授权逻辑结束.
    3.如果已经授权用户信息则调用微信小程序官方api:wx.getUserInfo或uniapp集成微信小程序api:uni.getUserInfo获取用户的头像昵称openid等用户个人信息.注意:用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息，按照官方推荐会显示用户在微信的头像和昵称，可参考:用户信息接口调整说明,官方头像昵称填写规范.
    4.调用服务端完成登录注册逻辑,登录或注册成功之后将服务端返回的token信息放在本地storage缓存中.

3.vuex+storage实现用户登录状态管理

    按照微信小程序授权流程简单交代一下案例场景:
    项目中登录组件在首页、动态、个人中心页面都会用到，为方便使用，封装为组件，使用vuex+storage实现登录状态管理。登录成功之后个人中心页面显示用户的登录用户信息.
个人中心页面创建时created方法中判断用户是否授权（对应方法：wx.getSetting）如果已经授权用户信息则调用uni.getUserInfo获取用户的头像昵称信息。
vuex常用属性实战介绍：

3.1 项目根目录创建store文件夹创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	// 这个代表全局可以访问数据对象，就像是咱们在组件中声明的 data 属性，区别在于data中数据为组件私有，这里state为项目全局共享。
	state: {
		// 登录状态,默认未登录
		loginState: : false, 
		// 用户信息,
		userInfo: {
			name: 'jack',  // 用户昵称
			avatar: '/static/nopic.png'  // 用户头像
		}
	},
	// 这个实时监听 state 内的数据对象变化，类似 咱们组件中的 computed 属性，会依赖 state 数据变化而变化
	getters: {
		// 昵称大写处理
		// storeNameUpper(state){ //第一个参数是默认参数
        //            return state.userInfo.name.toUpperCase()
        //        }
	},
	// 用来同步设置 state 的值
	mutations: {
		// 用户登录设置
		userLogin(state, userInfo) {
			state.loginState = true
			state.userInfo = userInfo
		},
		// 用户退出设置
		userLogout(state) {
			state.loginState = false
			state.userInfo = {
				name: '未知用户',
				avatar: '/static/nopic.png'
			}
		}
	},
	// 通过提交 mutations 内部的方法，异步更新 state 的状态，官方推荐都使用这种方法比较合适
	actions: {
		// 提交注册用户登录方法
		userLoginAction(context, userInfo) {
			context.commit('userLogin', userInfo)
		},
		// 提交注册用户退出方法
		userLogoutAction(context) {
			context.commit('userLogout')
		}
	}
})
export default store

属性说明:
    state表示全局共享数据,可以是变量也可以是对象;
    getters:类似于computed计算属性.常用的方法比如说对获取state变量中大写转换后的值.
    mutations:改变state存储数据内容;
    actions:提交mutations中用户更改state数据的方法;

3.2 main.js挂在到vue

// 引入 store 
import store from '@/store/index.js'
Vue.prototype.$store = store

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

3.3 基本使用

    共享变量和方法调用方式分别是:

this.$store.state.XXX(state中属性名);
 this.$store.commit("actions中定义的方法名");

登录主要处理逻辑:

引入全局定义属性和方法;属性声明用…mapState,方法声明用…mapActions
调用全局封装的登录方法(this.userLoginAction);
自定义登录成功之后全局监听事件(uni.

e

m

i

t

)

便于个人中心页面调用

(

u

n

i

.

emit)便于个人中心页面调用(uni.

emit)便于个人中心页面调用(uni.on)
个人中心页面监听登录成功方法(uni.$on)

    具体到个人中心页面me.vue,关于展示用户登录信息,涉及代码如下:

import {
		mapState,
		mapActions
	} from 'vuex'
computed: {
	// ...mapState为this.$store.state.XXX的简化写法,...mapState中数组中直接写state属性名即可
	...mapState(['loginState', 'userInfo'])
},
methods: {
	// ...mapActions相当于this.$store.commit("actions中定义的方法名"),...mapActions数组中元素为mutations中定义的方法名
			...mapActions(['userLoginAction', 'userLogoutAction']),
			login(){
			// 用户信息
			let loginInfo={}
			this.userLoginAction(loginInfo)
			uni.$emit('meUserLogin')
			}
}

    个人中心me.vue页面加载监听全局自定义事件:

uni.$on('meUserLogin', ()=>{
		// 登录成功后触发的逻辑,页面显示用户登录成功之后的头像昵称信息
})

    以上是以微信小程序授权为例介绍如何使用vuex进行登录状态管理，如果感觉有帮助欢迎评论区留言或点赞！