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 = truestate.userInfo = userInfo},// 用户退出设置userLogout(state) {state.loginState = falsestate.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 = storeconst app = new Vue({...App,store
})

3.3 基本使用

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

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

    具体到个人中心页面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'])
}

    登录组件登录操作成功之后触发全局的自定义事件:

uni.$emit('meUserLogin')

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

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

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