5.全局状态编写规范

全局状态管理统一使用 vuex ，相关代码统一放置在 store 目录中。
状态管理代码按照业务模块划分，每个模块在 store/modules 中创建一个文件，在 store/index.js 引入并整合各个模块。

模块代码示例

import {
    login,
    encryptPwd
} from '@/api/user.js'
import config from "@/config/index.json"
const TOKEN_KEY = 'token'
const USER_INFO_KEY = 'user-info'
export default {
    namespaced: true,
    state: () => {
        return {
            token: uni.getStorageSync(TOKEN_KEY) || '',
            userInfo: uni.getStorageSync(USER_INFO_KEY) || {},
            clientId: config.clientId,
            clientSecrt: config.clientSecrt
        }
    },
    mutations: {
        setToken(state, token) {
            state.token = token
            this.commit('user/saveToToken')
        },
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo
            this.commit('user/saveToUserInfo')
        },
        saveToToken(state) {
            uni.setStorage({
                key: TOKEN_KEY,
                data: state.token
            })
        },
        saveToUserInfo(state) {
            uni.setStorage({
                key: USER_INFO_KEY,
                data: state.userInfo
            })
        },
        removeToken(state) {
            state.token = ''
            this.commit('user/saveToToken')
        },
        removeUserInfo(state) {
            state.userInfo = {}
            this.commit('user/saveToUserInfo')
        }
    },
    actions: {
        async login(context, userInfo) {
            const {
                data
            } = await encryptPwd({
                password: userInfo.password
            })
            const {
                data: res
            } = await login({
                clientId: context.state.clientId,
                clientSecrt: context.state.clientSecrt,
                username: userInfo.username,
                password: data.password
            })
            this.commit('user/setToken', res.token)
            this.commit('user/setUserInfo', res.userDto)
            uni.reLaunch({
                url: "/pages/work/work"
            })
        },
        logout(context) {
            this.commit('user/removeToken')
            this.commit('user/removeUserInfo')
        }
    }
}

模块导入示例

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
        user,
    }
})
export default store

在业务组件中使用全局状态代码示例

import { mapActions, mapState } from 'vuex';
methods: {
        ...mapActions('user', ['login']),
        submit() {
            this.login({
                username: this.username,
                password: this.password
            })
            console.log('登录成功');
        }
    }