利用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参数

原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/228452.html

(0)
上一篇 2022年1月11日
下一篇 2022年1月11日

相关推荐

发表回复

登录后才能评论