uniappのグローバル変数実装の詳細な説明

  //同期ストレージ uni.setStorageSync("key","value")
  //同期取得 let value = uni.getStorageSync("key")  
  console.log("上記が完了するまで実行を待ちます)

  uni.setStorage({
   キー:"キー",
    データ:"値",
    成功:関数(){
      //ストレージ成功コールバック console.log("私は非同期ストレージのコールバックです。valが宣言された後に実行されます")
    }
  })
  let val = 1 //この行はまずuni.getStorage({
   キー:"キー",
    成功:function(res){
      //成功したコールバックを保存 console.log("これは非同期に取得されたコールバックです。val2が宣言された後に実行されます")
    }
  })
  let val2 = 2 // この行が最初に実行されます

  //たとえば、config.js ではベースドメイン名をエクスポートしています export default {
   ベース URL:"http://www.test.com"
  }

  // このファイルを import import config from "../common/config.js" から導入します
  エクスポートデフォルト{
    オンロード(){
     console.log(config.baseUrl)//baseUrl:"http://www.test.com"
    }
  }

  //ここでのconfig.jsは、すでに上で記述したファイルを参照します。import config from "./common/config.js"
  // baseUrl を Vue にマウントすると、ページやコンポーネントで this.baseUrl を介してアクセスできるようになります。Vue.prototype.baseUrl = config.baseUrl

<テンプレート>
 <!-- WeChat アプレットでは値は未定義ですが、他の端末では有効です -->
 <表示>
 値は次のとおりです: {{this.baseUrl}}
 </ビュー>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
 オンロード() {
    console.log(this.baseUrl)//"http://www.test.com"
 }
 }
</スクリプト>

  エクスポートデフォルト{
   //App.vueでglobalDataを定義する必要があります
   グローバルデータ:{
     ユーザー名:"白居易"
    },
    // ここで注意すべき点は、App.vue で globalData を使用する場合、getApp() がこの時点ではまだ生成されていないため、getApp().globalData.Name を直接使用できないことです // 1. 非 V3 モードでは、this.$scope.globalData を通じて取得できます // 2. V3 モードでは、getApp({allowDefault: true}).globalData onLaunch(){ を通じて取得できます
     console.log(this.$scope.globalData.userName)
    }
  }

<テンプレート>
 <表示>
 <表示>
  <!-- getApp().globalData.userName はテンプレート内で直接使用できないことに注意してください -->
  <<The Charcoal Seller>> の著者は: {{author}} です。
 </ビュー>
 <表示>
  <u-button @click="modifyUserName">userName の値を変更する</u-button>
 </ビュー>
 </ビュー>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
 データ（） {
  戻る {
  著者： ''
  }
 },
 オンショー() {
  // A.vue が画面に表示されるたびに onShow がトリガーされ、著者の値が更新されます。this.author = getApp().globalData.userName;
 },
 メソッド: {
  ユーザー名を変更する() {
                //この時点でglobalDataの値が変更されます getApp().globalData.userName = "诗圣";
  // userName を変更した後、globalData が応答しないため、このページの作成者は自動的に更新されません。// 引き続きこのページの作成者の値を手動で更新する必要があります。これは globalData の欠点を示しています。 this.author = getApp().globalData.userName;
  }
 }
 }
</スクリプト>

//index.js
  「vue」からVueをインポートします
  「vuex」からVuexをインポートします
  Vue.use(Vuex)
  定数ストア = 新しい Vuex.Store({
   州：{
     vuex_トークン:"123456"
    },
    //状態の変化の値を同期的に変更するためのメソッド:{
     //Payload は、ユーザーがミューテーションを使用するときに渡されるパラメータです。単一の値またはオブジェクトにすることができます。modifyToken(state,payload){
       state.vuex_token = ペイロード.token
      }
    }
  })
  デフォルトストアをエクスポート

'@/store' からストアをインポートします。

//ストアをVueオブジェクト作成に配置する const app = new Vue({
 店、
 ...アプリ
})

<テンプレート>
 <表示>
 <表示>
  トークンの値は {{vuex_token}} です
 </ビュー>
 <u-button @click="btnClick">vuex_token を変更する</u-button>
 </ビュー>
</テンプレート>

<スクリプト>
//これは、ストアを使いやすくするために Vue が提供する API です。詳細については、Vue の公式ドキュメントを参照してください。import {mapState, mapMutations} from 'vuex'; 
エクスポートデフォルト{
 計算: { 
 ...mapState(['vuex_token']) 
 }, 
 メソッド: { 
 ...mapMutations(['modifyToken'])、
 ボタンクリック() {
  // ここでの 2 番目のパラメータは通常の変数またはオブジェクトで、カスタマイズされ、ミューテーション要件に従って処理されます (mapMutations を使用せずに)
  this.$store.commit('modifyToken', {トークン: 'xxxyyyzzz'}
            //mapMutations を使用する this.modifyToken({token: 'xxxyyyzzz'})
 }
 } 
}
</スクリプト>

//Vuex、vue を導入します。Vuex を使用します。この手順は、vuex import Vue from 'vue' の一般的な使用法と変わりません。
'vuex' から Vuex をインポートします
Vue.use(Vuex)

// 永続的に保存する必要があるデータを格納する変数を作成します。let lifeData = {};

試す{
  // lifeData 変数がローカルに存在するかどうかを取得します。APP を初めて起動したときには存在しません。lifeData = uni.getStorageSync('lifeData');
}キャッチ(e){
 
}

// 永続的に保存し、次回 APP を起動したときに取得する必要がある、状態の変数名 let saveStateKeys = ['vuex_user', 'vuex_token'];

// 変数をローカル ストレージに保存します (更新/再起動しても失われません (アプリは更新されず、再起動のみされます))
const saveLifeData = function(キー、値){
 // 変数名が保存する配列にあるかどうかを判定します // これは、変数名が saveStateKeys に保存されているかどうかを判定し、それを永久保存のために lifeData に保存します。それ以外の場合は、一般的な vuex 保存方法と同じです if (saveStateKeys.indexOf(key) != -1) {
 // ローカルに保存された lifeData オブジェクトを取得し、そのオブジェクトに変数を追加します。let tmp = uni.getStorageSync('lifeData');
 // アプリを初めて開いたときは lifeData 変数が存在しないので、{} 空のオブジェクトを配置します tmp = tmp ? tmp : {};
 tmp[キー] = 値;
 // このステップを実行すると、保存する必要があるすべての変数がローカルの lifeData オブジェクトにマウントされます uni.setStorageSync('lifeData', tmp);
 }
}
定数ストア = 新しい Vuex.Store({
 // 以下の値は単なる例です。使用時には削除してください: {
 // 上記のローカルから取得した lifeData オブジェクトの下に対応する属性がある場合は、それを state 内の対応する変数に代入します // vuex_ プレフィックスを追加すると、変数名の競合を防ぎ、一目でわかりやすくなります // lifeData はすでにローカルに保存されているため、永続的に保存されるデータは lifeData から取得されます vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
 vuex_token: lifeData.vuex_token ? lifeData.vuex_token : ''、
 // vuex_version をローカルの永続ストレージに保存する必要がない場合は、lifeData.vuex_version メソッドは必要ありません vuex_version: '1.0.1',
 },
 突然変異:
 $uStore(状態、ペイロード) {
            //Payload は、this.$u.vuex が後で呼び出されるときに渡されるオブジェクトです //たとえば、this.$u.vuex("user.info.score","jack") payload = {name:"user.info.score",value:"jack"}
  // マルチレベル呼び出しであるかどうか、およびオブジェクトが user.info.score = 1 などの状態に存在するかどうかを判断します。
  nameArr = payload.name.split('.');//[ユーザー、情報、スコア]
  saveKey = '' とします。
  len = nameArr.length;とします。
  nameArr.length >= 2の場合{
  obj = state[nameArr[0]]とします。
  for(i = 1; i < len - 1; i++) {
   obj = obj[nameArr[i]]; // この時点ではobjはuser.infoなので、もちろんまだ空のデータです}
                //nameArr[len-1]はスコア、obj[nameArr[len - 1]]はuser.info.scoreと同等です
  obj[nameArr[len - 1]] = ペイロード.値;
  保存キー = nameArr[0];
  } それ以外 {
  // 単一レベル変数（状態が通常の変数の場合） state[payload.name] = payload.value;
  保存キー = ペイロード名;
  }
  // 変数をローカルに保存します。上部の関数定義を参照してください saveLifeData(saveKey, state[saveKey])
 }
 }
})
デフォルトストアをエクスポート

//ミックスイン.js
'vuex' から { mapState } をインポートします。
「@/store」からストアをインポートします

// ルート ディレクトリの store/index.js にあるユーザーの vuex のすべての状態変数をグローバル変数にロードしてみます。let $uStoreKey = [];
試す{
 ストアのキーをストアのステートに格納します。
}キャッチ(e){
 
}

モジュール.エクスポート = {
 作成された() {
 // vuex メソッドを this.$u にフックします // 使用方法: vuex 状態の user.name 変数を "epic" に変更する場合 => this.$u.vuex('user.name', 'epic')
 // vuex の状態のバージョン変数を 1.0.1 に変更したい場合 => this.$u.vuex('version', '1.0.1')
 this.$u.vuex = (名前、値) => {
  this.$store.commit('$uStore', {
  name,value //$uStore によって渡されたペイロードを覚えていますか? 笑 
  })
 }
 },
 計算: {
 // vuex の状態にあるすべての変数をグローバル ミックスインに分解します...mapState($uStoreKey)
 }
}

//メイン.js
vuexStore を require("@/store/$u.mixin.js"); にします。
Vue.mixin(vuexStore);

//メイン.js
'@/store' からストアをインポートします。

//ストアをVueオブジェクト作成に配置する const app = new Vue({
 店、
 ...アプリ
})