网站空间ip需不需要备案,深圳最便宜的物流公司,wordpress图片无法显示,南京价格网站建设1.背景 vuex是数据共享方案之一,本文以微信小程序登录授权为例介绍一下vuex常用属性state、getters、mutations、actions.
2.基于uniapp实现微信小程序登录授权流程 1.凡是需要用户登录授权信息的页面创建时created方法中需要判断用户是否登录,需要使用本地缓存的token调用服务…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.vuexstorage实现用户登录状态管理 按照微信小程序授权流程简单交代一下案例场景: 项目中登录组件在首页、动态、个人中心页面都会用到为方便使用封装为组件使用vuexstorage实现登录状态管理。登录成功之后个人中心页面显示用户的登录用户信息. 个人中心页面创建时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进行登录状态管理如果感觉有帮助欢迎评论区留言或点赞
