# 小程序鉴权登录
# 需求分析
流程分析:
说明:
- 时序图的阅读方式:
- 搞清楚有几方,哪几个重要的交互部分,比如:上面有小程序、开发服务器、小程序官方后台;
- 从上至下,从左至右,跟随箭头的方向走;
- 时序图中,任何一个流程中断,后续的相关流程不会继续进行;
通过分析,我们获取用户的信息用于创建用户,并通过自己的服务器返回用户的登录态,即token信息与用户信息。
用户信息需要跨页面进行共享,同时,也需要持久化,所以惯性的思考到了 vuex + 本地缓存的方案。
# Vuex集成uniapp
# 初始化store
重要:uniapp中内置vuex,所以直接按照vue中使用vuex的步骤进行集成。
创建文件store/index.js
:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
state:{
//存放状态
// ...
}
})
export default store
在 main.js
中导入文件:
import Vue from 'vue'
import App from './App'
import store from './store'
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
const app = new Vue({
store,
...App
})
app.$mount()
state使用上的区别:
- 直接在template中不能使用
$store
取值; - 在data中无法使用
this.$store.state
取对应的初始值;
正确的打开姿势:
- 辅助函数(推荐)
- computed方法
// store.js
const state = {
count: 0,
msg: 'hello Vuex'
}
// 组件中
computed: {
// 方法一:辅助函数
// ...mapState(['count']),
// ...mapState({
// msg2: (state) => state.msg
// }),
// 方法二:computed
count1 () {
return this.$store.state.count
},
}
← 首页模块 消息&热门&个人中心 →