uni-app中设置全局变量和动态修改全局变量

需求:

不同的事项跳转的页面流可能不一样，有一部分是一样的，一部分是不一样。另外，每个页面顶部都有一个步骤条，执行跳转不同的页面流时，每个页面顶部的步骤条也要跟着做对应的改变。

解决思路:

1、把前端页面的url给后台，后台开发人员把这些页面的url、步骤等等封装到接口里面，用户点击事项时，调用接口，获取这个页面对应页面流的url和步骤条数据。 2、项目默认一个步骤条数据，并把该默认数据复制给全局变量，然后在相应的组件中调用这个全局变量并且渲染数据。 3、如果用户点击的事项与默认的步骤条数据不一致，就在组件中更新全局变量的值。

具体实现代码:

在common文件夹中新建一个test.js文件，代码如下:

export default {
   $test: [
    {
       test: ''
    },
    {
           test: ''
    },
    {
       test: ''
    }
      ],
      setTest($test){
    this.$test= $test;
      }
}

 

我添加了一个全局变量 $test，一个是set方法：这个set方法是在组件中修改全局变量时需要的。

在vue项目中的main.js中导入test.js文件:

import test from './common/test.js'

然后将该对象添加到vue原型链上，这样就可以在组建中直接调用了

Vue.prototype.$test = test;

在组件中通过this访问:

this.$test.$test;

在html中访问

{{this.$test.$test}}

在组件中修改全局变量:

this.$test.setTest(test)

总结:

1、其实这个有点儿像根据不同的角色分配给用户不同的权限(有点儿类似)。

2、如果能充分理解这个实现的思想的话，可以应用到其他的更多的场景中。

 如果尝试上述方法无效的，欢迎留言。