本节主要讲解如何使用 Vuex 以及 Uniapp 的 storage 储存功能来做用户状态保存。

下面先来了解下 storage 的基本概念。

# 利用 storage 存储信息

传统的网页 h5 端数据存储方式（cookie、localStorage、sessionStorage，IndexedDB…），而 App 端无大小限制，不是缓存，是持久化存储。小程序端是自有的 storage 方式，在于用户主动删除或超过一定时间被自动清理，否则数据都一直存在。

Uniapp 集成了小程序，app，h5 的数据缓存，统一了 uni.setStorage()，uni.setStorage() 系列 API ，完成对缓存数据的操作。

在登录这一块功能，传统做法是使用 cookie 的存储机制来判定用户。

使用 cookie：用户登录后由后端生成一个 sessionid 放在 cookie 中返回给客户端，并且服务端一直记录着这个 sessionid ，客户端以后每次请求都会带上这个 sessionid，服务端通过这个 sessionid 来验证身份之类的操作。（存在危险：攻击者拿到了cookie（sessionid）后，就可以完全替代你，客户端以为攻击者是实际用户）。

使用 token：用户登录后由后端返回一个 token 给客户端，客户端将这个 token 存储起来，然后每次客户端请求都需要开发者手动将 token 放在请求 header 中带过去，服务端每次只需要对这个 token 进行验证就能使用 token 中的信息来进行下一步操作了。

Cookie 是 JavaScript 中的浏览器对象，在小程序，App 中并没有 document.cookie 对象，因此不支持读写 cookie，所以使用 Uniapp 开发不能用传统的应用那样通过读取 cookie 来判断是否是登录状态。Uniapp 中有 uni.setStorage() 系列 API 进行数据缓存，而且整个框架的语法糖跟 Vue 类似，那我们可以 uni.setStorage() 以及 Vuex 对登录状态进行管理。

注：Uniapp 设置存储有同步与异步之分，以 Sync 结尾的都是同步缓存操作:

// 异步
uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

// 同步
try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

有设置缓存 API ，当然还有 API 指定 key 去除缓存 uni.removeStorage()，以及 API 清理本地数据缓存 uni.clearStorage()。

注意 Uniapp 的 Storage 在不同端的实现不同：

1. 所有 storage 的 API 操作对应有同步异步之分，容易使用混淆。
2. H5端为 localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
3. App 端为原生的 plus.storage，无大小限制，不是缓存，持久化
4. 各个小程序端为其自带的 storage api ，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
5. 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
6. 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
7. 百度、头条小程序文档未说明大小限制。

根据上面的 storage 的 API 与 Vuex，我们可以先捋一下登录功能逻辑：

# 引入 Vuex，定义登录状态及用户信息

在 store/index.js 文件夹目录引入 Vuex，添加状态和分发方法：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        uerInfo: {  // 用户信息
            hasLogin: false,
            token: '',
            profile: ''  // 简介
        },
    },
    mutations: {
        storeLogin(state, payload) { // 改变登录状态
            const temp = {
                hasLogin: true,
                token: payload.token,
                profile: payload.profile
            }

            state.uerInfo = Object.assign({}, state.uerInfo, temp)

            // 将用户信息保存在本地
            uni.setStorageSync('uerInfo', JSON.stringify(state.uerInfo))

        },
        storeLogout(state) { // 退出登录
            const temp = {
                hasLogin: false,
                token: '',
                profile: {}
            }
            state.uerInfo = Object.assign({}, state.uerInfo, temp)

            uni.removeStorageSync('uerInfo')
        }
    }
})

export default store

Uniapp 中可以直接引入 Vuex 而不需命令行安装依赖，只需要注入到 Vuex 插件 Vue.use(Vuex)。

new Vuex.Store() 对象参数 state 保存用户信息，项目全局共享这些信息。mutations 对象定义方法 storeLogin，storeLogout 暴露出去给项目中的页面组件修改 state 的唯一通道，修改 uerInfo 状态信息只能通过这两个方法。

# 挂载 store ，全局共享状态信息

要想项目全局共享这些信息，需要在入口文件 main.js 文件中导入这个 js，并把 store 挂载到 Vue 中。