前些时间写了 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参数
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/228452.html