uniapp—全局状态管理机制Vuex的使用

vue是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

示例如下：
(1) 在根目录下创建 stroe/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建一个 store
const store = new Vuex.Store({
    // (1)初始 state 对象
    state:{
        hasLogin: false,
        token: "",
        company:"未知",
        userInfo: {
            "name": "未知",
            "role": "未知",
            "age": 0
        },
    },
    // (2)定义一些mutation
    mutations:{
        change(state,company){
            state.company = company;
        },
        login(state,token,userInfo) {
            state.hasLogin = true;
            state.token = token;
            state.userInfo = userInfo;
        },
        logout(state) {
            state.hasLogin = false;
            state.token = "";
        },
        celarUserInfo(state) {
            state.userInfo = {
                "name": "",
                "role": "",
                "age": 0
            };
        },
    }
})

// 导出该模块:以便其他文件可对其进行使用
export default store

在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等；并在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式将其导入，以便能够对其进行使用；但在一个文件或模块中，export、import可以有多个，export default仅有一个。

(2) 在main.js中挂在Vuex

import store from './store'
Vue.prototype.$store = store;

(3) 获取状态对象与触发状态变更

说明：使用 Vuex 保证了变量在全局的统一性，可以在实际开发中进行对应场景的应用。

参考：Vuex-Vue状态管理模式
拓展：uni-app之 全局变量/方法/模块/组件 的使用