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) 获取状态对象与触发状态变更

<template>
    <view>
        <text>名称:{{company}}</text>
        <button type="primary" @tap="onChange()">更改</button>
    </view>
</template>

<script>
    import {mapState,mapMutations} from 'vuex';
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapState(['company'])
        },
        methods: {
            onChange : function(){
                this.$store.commit('change', 'jk');//通过 store.commit 方法触发状态变更
               }
        },
        onLoad() {
        
        }
    }
</script>

<style>

</style>

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