首页 > 其他分享> 文章详细

uView——全局变量配置

2021-12-03 19:35:21 阅读：776 来源： 互联网

标签：uView 配置 state let store 全局变量 vuex lifeData user

简介

　　作为一个完整项目，全局变量是必不可少。

　　uView进行配置后，将全局变量永久存储到本地。在项目加载的时候附加到vue.data上。

方法　　

　　this.$u.vuex('vuex_xxx','value')

　　　　参数：

　　　　　　string : 变量名称

　　　　　　value：值

　　　　返回值：无　　

　　　　返回值意义：无

　　　　作用：保存变量到本地存储中。

　　this.vuex_xxx

　　　　取值

配置

　　1. 生成store/index.js ，保存全局变量源代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

let lifeData = {};

try{
    // 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的
    lifeData = uni.getStorageSync('lifeData');
}catch(e){
    
}

// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 保存变量到本地存储中
const saveLifeData = function(key, value){
    // 判断变量名是否在需要存储的数组中
    if(saveStateKeys.indexOf(key) != -1) {
        // 获取本地存储的lifeData对象，将变量添加到对象中
        let tmp = uni.getStorageSync('lifeData');
        // 第一次打开APP，不存在lifeData变量，故放一个{}空对象
        tmp = tmp ? tmp : {};
        tmp[key] = value;
        // 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
        uni.setStorageSync('lifeData', tmp);
    }
}
const store = new Vuex.Store({
    // 下面这些值仅为示例，使用过程中请删除
    state: {
        // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
        // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
        vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
        vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
        // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
        vuex_version: '1.0.1',
    },
    mutations: {
        $uStore(state, payload) {
            // 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
            let nameArr = payload.name.split('.');
            let saveKey = '';
            let len = nameArr.length;
            if(nameArr.length >= 2) {
                let obj = state[nameArr[0]];
                for(let i = 1; i < len - 1; i ++) {
                    obj = obj[nameArr[i]];
                }
                obj[nameArr[len - 1]] = payload.value;
                saveKey = nameArr[0];
            } else {
                // 单层级变量，在state就是一个普通变量的情况
                state[payload.name] = payload.value;
                saveKey = payload.name;
            }
            // 保存变量到本地，见顶部函数定义
            saveLifeData(saveKey, state[saveKey])
        }
    }
})

export default store

　　2. 继续保存源代码: store/$u.mixin.js

// $u.mixin.js

import { mapState } from 'vuex'
import store from "@/store"

// 尝试将用户在根目录中的store/index.js的vuex的state变量，全部加载到全局变量中
let $uStoreKey = [];
try{
    $uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
    
}

module.exports = {
    created() {
        // 将vuex方法挂在到$u中
        // 使用方法为：如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
        // 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
        this.$u.vuex = (name, value) => {
            this.$store.commit('$uStore', {
                name,value
            })
        }
    },
    computed: {
        // 将vuex的state中的所有变量，解构到全局混入的mixin中
        ...mapState($uStoreKey)
    }
}

　　3.在main.js中，引入全局变量.js

let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);
// main.js

import store from '@/store';

// 将store放入Vue对象创建中
const app = new Vue({
    store,
    ...App
})

　　4. 需要添加的全局变量在store/index.js里

let saveStateKeys = ['vuex_user', 'vuex_token'];
和
state: {

        // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
        // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
        vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
        vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
        // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
        vuex_version: '1.0.1',
    }
进行配置



　　5. 项目中
　　this.$u.vuex(string , obj ) 保存全局变量

　　 vue.vuex_xxx 取到变量

标签：uView,配置,state,let,store,全局变量,vuex,lifeData,user
来源： https://www.cnblogs.com/remix777/p/15639663.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uView——全局变量配置