在日常开发过程,相信大家有遇到过各种需求,而我,在这段事件便遇到了一个,需要通过用户界面配置动态接口,同时,因为是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 去调用变量了
再该页面输入框输入值之后,将其值存入进去,之后再所有页面都可使用所定义的变量。
如果有不懂的请联系我。