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、如果能充分理解這個實現的思想的話，可以應用到其他的更多的場景中。

 如果嘗試上述方法無效的，歡迎留言。