uni 结合vuex 编写动态全局配置变量 this.baseurl

IT技术2年前 (2022)发布 IT大王

0 54

在日常开发过程，相信大家有遇到过各种需求，而我，在这段事件便遇到了一个，需要通过用户界面配置动态接口，同时，因为是app小程序开发，所以接口中涉及到了http以及websocket两个类型的接口。

同时，因为公司所设计到的大多数都是这类型的框架，因此，想要将其多个项目整合为一个app，页面等布局全部统一，那么，便只能通过给用户开通自己配置ip以及http端口和websocket端口来搞定了。

那么，该如何实现呢，通常情况下，是this.baseurl去实现动态配置变量接口，但是，这个只能满足一个，翻阅了网上大多数资料，没有找到办法，在询问个一个朋友后，了解到了uni中可以将vuex引入进去，

接下来看一下效果再来看一下如何将其引入进去。

通过点击右上角的设置按钮，来实现弹出框

那么，说一下如何将其vuex引入进uni中

首先再目录文件中新建文件夹store，再新建文件夹下层新建js文件index

将一下代码放入Index.Js文件中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        hasLogin: false,
        userInfo: {ip:'',port:''},
        httpLj:'',
        webSocketLj:'',
    },
    mutations: {
        login(state, provider) {
            state.hasLogin = true;
            state.userInfo = provider;
            uni.setStorage({ //缓存用户登陆状态
                key: 'userInfo',
                data: provider
            })
        },
        logout(state) {
            state.hasLogin = false;
            state.userInfo = {};
            uni.removeStorage({
                key: 'userInfo'
            })
        }
    },
    actions: {
    }
})
export default store

然后再其main.js文件中插入进去一下两行代码

Vue.prototype.$store = store
import store from ‘./store’

再登录页面中的script中将其引用

import { mapState, mapMutations } from ‘vuex’;
import store from ‘@/store/index.js’;

然后就是使用 this.$store 去调用变量了

再该页面输入框输入值之后，将其值存入进去，之后再所有页面都可使用所定义的变量。

如果有不懂的请联系我。

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com