利用Vuex实现uni-app项目全局接收存取url参数
前些时间写了 Vue状态管理模式：Vuex入门教程 ，今天再整理一下，利用 Vuex 全局接受参数及存取使用的一个方法。
首先要使用 store ，安装及使用方法参见上文。
在 ./store/index.js 中添加代码：
const store = new Vuex.Store({
state: {
device: null, // 设备来源
},
mutations: {
/*
* 更新设备来源
*/
UPDATE_DEVICE (state, deviceStr) {
if (deviceStr) {
state.device = deviceStr.toLowerCase()
console.log('device：' + state.device)
}
}
}
});
export default store这里使用了 toLowerCase() 方法，是将接收的参数统一转换为小写。
当然你也可以使用 toUpperCase() 方法将接收的参数统一转换成大写，也可以不进行转换，直接保存。
在 ./App.vue 中展开并调用 mutations 方法，在 onLaunch 中调用：
import { mapMutations } from 'vuex'
onLaunch: function(e) {
// 获取设备参数
let device = e.query.device
if (device) {
this.saveState(e.query)
}
},
methods: {
...mapMutations(['UPDATE_DEVICE']),
saveState: function (query) {
if (query.device) {
this.UPDATE_DEVICE(query.device)
}
}
}我是在 App.vue 中调用的，当然你也可以使用 Vue 的路由钩子：
import vue from "vue";
import vueRouter from "vue-router"
import routes from "../routes"
import store from "../store"
vue.use(vueRouter);
const router = new vueRouter({
routes,
mode: "history"
})
router.beforeEach((to, from, next) => {
//判断设备
store.commit('UPDATE_DEVICE', to.query.device)
next()
});这样就可以在任意位置调用并存取接收到的参数了：
例如在 ./src/pages/index/index.vue 中使用：
let device = this.$store.state.device || null未经允许不得转载：w3h5 » 利用Vuex实现uni-app项目全局接收存取url参数
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读