今天在看uView组件库时偶然发现uView对全局变量也有一些讲解 本人之前一直比较迷糊 于是就按照他的方式看了了解了一下 并且知道 自己之前一直在用的就是 将全局的基础配置 如文档所说确实会导致小程序在引用上有一些问题,刚好这个项目是新项目,于是决定改用vuex 并且进行二次的改造 按照文档来,开始整!
首先是文件结构 注意要使用vuex 需要引入和注册 这些百度就知道.
创建一个store文件夹 - > 里面创建一个index.js文件
//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_userInfoWx'];
// 保存变量到本地存储中
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_userInfoWx: lifeData.vuex_userInfoWx?lifeData.vuex_userInfoWx:'',
// 如果vuex_version无需保存到本地永久存储,无需lifeData.vuex_version方式
vuex_topHeight:'',
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;
}
// 保存变量到本地,见顶部函数定义
console.log('响应式发现vuex存入新对象',payload)
saveLifeData(saveKey, state[saveKey])
}
}
})
export default store
这里做完之后,因为我们不可能每个地方要用vuex都要引入一遍,所以按照文档所说,使用vue的混入 Mixin() 在sotre文件夹中 再创建一个文件 并且命名为 :$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)
}
}
最后是在main.js中将这些文件进行引入 注册
import Vue from 'vue'
import App from './App'
import store from './store'
//设置根节点
App.mpType = 'app'
// 将store放入Vue对象创建中
const app = new Vue({
store,
...App
})
app.$mount()
// 引入uViewUi
import uView from "uview-ui";
Vue.use(uView);
//全局混入vuex
let vuexStore = require("@/store/$u.mixin");
Vue.mixin(vuexStore);
// #ifndef VUE3
Vue.config.productionTip = false
//引入vuex
Vue.prototype.$store = store
Vue.prototype.$adpid = "1111111111"
Vue.prototype.$backgroundAudioData = {
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
}
// #endif
// // #ifdef VUE3
// import {
// createSSRApp
// } from 'vue'
// export function createApp() {
// const app = createSSRApp(App)
// app.use(store)
// app.config.globalProperties.$adpid = "1111111111"
// app.config.globalProperties.$backgroundAudioData = {
// playing: false,
// playTime: 0,
// formatedPlayTime: '00:00:00'
// }
// return {
// app
// }
// }
// // #endif
//将全局配置参数加入到原型上 全局使用this调用
import comParams from 'common/GlobalParams/com.js'
Vue.prototype.$Com = comParams;
//将时间格式处理的方法注册到全局
import "Utils/formDate.js"
//将全局共用的业务方法注册到全局
import "Utils/configParams.js"
于是我们就可以在vue文件中,使用this.$u.vuex('state变量名','值') 的方式进行存入啦。
并且如果你想存入vuex的同时,也可以将数据永久保存在localStorage中。
// 需要永久存储,且下次APP启动需要取出的,在state中的变量名
let saveStateKeys = ['vuex_userInfoWx'];
这样在存入后 也会自动保存到 lifeDate.vuex_userInfoWx
最后 加油 ~不断学习不断提高~ 有其他问题可以看官方文档
https://www.uviewui.com/guide/globalVariable.html 官方文档