小程序鉴权登录

需求分析

流程分析：

说明：

• 时序图的阅读方式：
  • 搞清楚有几方，哪几个重要的交互部分，比如：上面有小程序、开发服务器、小程序官方后台；
  • 从上至下，从左至右，跟随箭头的方向走；
  • 时序图中，任何一个流程中断，后续的相关流程不会继续进行；

通过分析，我们获取用户的信息用于创建用户，并通过自己的服务器返回用户的登录态，即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
  },
}