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