Detailed explanation of uniapp's global variable implementation

  //Synchronous storage uni.setStorageSync("key","value")
  //Synchronous acquisition let value = uni.getStorageSync("key")  
  console.log("I will wait until the above is completed before executing)

  uni.setStorage({
   key:"key",
    data:"value",
    success:function(){
      //Storage successful callback console.log("I am the callback of asynchronous storage, I will be executed after val is declared")
    }
  })
  let val = 1 //This line will first execute uni.getStorage({
   key:"key",
    success:function(res){
      //Store successful callback console.log("I am the callback obtained asynchronously, I will be executed after val2 is declared")
    }
  })
  let val2 = 2 // This line will be executed first

  //For example, in config.js we exported a base domain name export default {
   baseUrl:"http://www.test.com"
  }

  //Introduce this file through import import config from "../common/config.js"
  export default {
    onLoad(){
     console.log(config.baseUrl)//baseUrl:"http://www.test.com"
    }
  }

  //The config.js here refers to the file already written above import config from "./common/config.js"
  //Mount baseUrl to Vue, and then you can access it in pages and components through this.baseUrl Vue.prototype.baseUrl = config.baseUrl

<template>
 <!-- The value is undefined in WeChat applet, valid on other terminals-->
 <view>
 The value is: {{this.baseUrl}}
 </view>
</template>

<script>
 export default {
 onLoad() {
    console.log(this.baseUrl)//"http://www.test.com"
 }
 }
</script>

  export default{
   //Need to define globalData in App.vue
   globalData:{
     userName:"Bai Juyi"
    },
    //Note here that if you want to use globalData in App.vue, you cannot use getApp().globalData.Name directly, because getApp() has not been generated at this time // 1. Non-V3 mode, you can get it through this.$scope.globalData // 2. V3 mode, you can get it through getApp({allowDefault: true}).globalData onLaunch(){
     console.log(this.$scope.globalData.userName)
    }
  }

<template>
 <view>
 <view>
  <!-- Note that getApp().globalData.userName cannot be used directly in the template -->
  The author of <<The Charcoal Seller>> is: {{author}}
 </view>
 <view>
  <u-button @click="modifyUserName">Modify userName value</u-button>
 </view>
 </view>
</template>

<script>
 export default {
 data() {
  return {
  author: ''
  }
 },
 onShow() {
  // Every time A.vue appears on the screen, onShow is triggered, thus updating the author value this.author = getApp().globalData.userName;
 },
 methods: {
  modifyUserName() {
                //The value of globalData is modified at this time getApp().globalData.userName = "诗圣";
  // After modifying userName, the author of this page will still not be automatically refreshed, because globalData is not responsive. // We still need to manually refresh the author value of this page, which shows the disadvantages of globalData this.author = getApp().globalData.userName;
  }
 }
 }
</script>

//index.js
  import Vue from "vue"
  import Vuex from "vuex"
  Vue.use(Vuex)
  const store = new Vuex.Store({
   state:{
     vuex_token:"123456"
    },
    //Methods for synchronously modifying the value in state mutations:{
     //Payload is a parameter passed in when the user uses mutations. It can be a single value or an object modifyToken(state,payload){
       state.vuex_token = payload.token
      }
    }
  })
  export default store

import store from '@/store';

//Put the store into the Vue object creation const app = new Vue({
 store,
 ...App
})

<template>
 <view>
 <view>
  Token value is {{vuex_token}}
 </view>
 <u-button @click="btnClick">Modify vuex_token</u-button>
 </view>
</template>

<script>
//This is the API provided by Vue to make it easier to use the store. For details, please go to Vue official documentation import {mapState, mapMutations} from 'vuex'; 
export default {
 computed: { 
 ...mapState(['vuex_token']) 
 }, 
 methods: { 
 ...mapMutations(['modifyToken']),
 btnClick() {
  // The second parameter here can be a normal variable or object, customized, and processed according to mutation requirements (without using mapMutations)
  this.$store.commit('modifyToken', {token: 'xxxyyyzzz'}
            //Using mapMutations this.modifyToken({token: 'xxxyyyzzz'})
 }
 } 
}
</script>

//Introduce Vuex, vue Use Vuex, this step is no different from the general use of vuex import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//Create a variable to store data that needs to be stored permanently let lifeData = {};

try{
  // Try to get whether the lifeData variable exists locally. It does not exist when the APP is started for the first time. lifeData = uni.getStorageSync('lifeData');
}catch(e){
 
}

// Need to be stored permanently and retrieved the next time the APP is started, the variable name in the state let saveStateKeys = ['vuex_user', 'vuex_token'];

// Save variables to local storage (no loss when refreshing/restarting (app does not refresh, app will only restart))
const saveLifeData = function(key, value){
 // Determine whether the variable name is in the array to be stored // This is to determine if the variable name is stored in saveStateKeys, then store it in lifeData for permanent storage, otherwise it is the same as the general vuex storage method if (saveStateKeys.indexOf(key) != -1) {
 // Get the locally stored lifeData object and add the variable to the object let tmp = uni.getStorageSync('lifeData');
 // The first time you open the app, there is no lifeData variable, so put an {} empty object tmp = tmp ? tmp : {};
 tmp[key] = value;
 // After executing this step, all variables that need to be stored are mounted in the local lifeData object uni.setStorageSync('lifeData', tmp);
 }
}
const store = new Vuex.Store({
 // The following values ​​are just examples, please delete them during use state: {
 // If there is a corresponding attribute under the lifeData object obtained from the local above, assign it to the corresponding variable in state // Adding the vuex_ prefix prevents variable name conflicts and makes it clear at a glance // The permanently stored data will be obtained from lifeData because lifeData is already stored locally vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
 vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 // If vuex_version does not need to be saved to local permanent storage, lifeData.vuex_version method is not required vuex_version: '1.0.1',
 },
 mutations:
 $uStore(state, payload) {
            //Payload is the object passed in when this.$u.vuex is called later //such as this.$u.vuex("user.info.score","jack") payload = {name:"user.info.score",value:"jack"}
  // Determine whether it is a multi-level call, and the object exists in the state, such as user.info.score = 1
  let nameArr = payload.name.split('.');//[user,info,score]
  let saveKey = '';
  let len ​​= nameArr.length;
  if(nameArr.length >= 2) {
  let obj = state[nameArr[0]];
  for(let i = 1; i < len - 1; i ++) {
   obj = obj[nameArr[i]]; // At this time, obj is user.info, of course, it is still an empty data}
                //nameArr[len-1] is score, obj[nameArr[len - 1]] is equivalent to user.info.score
  obj[nameArr[len - 1]] = payload.value;
  saveKey = nameArr[0];
  } else {
  // Single-level variable, in the case where state is a normal variable state[payload.name] = payload.value;
  saveKey = payload.name;
  }
  // Save variables locally, see the top function definition saveLifeData(saveKey, state[saveKey])
 }
 }
})
export default store

//mixin.js
import { mapState } from 'vuex'
import store from "@/store"

// Try to load all the state variables of the user's vuex in store/index.js in the root directory into global variables let $uStoreKey = [];
try{
 $uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
 
}

module.exports = {
 created() {
 //Hook the vuex method to this.$u //Usage method: If you want to modify the user.name variable in the vuex state to "epic" => this.$u.vuex('user.name', 'epic')
 // If you want to modify the version variable of vuex's state to 1.0.1 => this.$u.vuex('version', '1.0.1')
 this.$u.vuex = (name, value) => {
  this.$store.commit('$uStore', {
  name,value //Do you recall the payload passed in by $uStore? haha 
  })
 }
 },
 computed: {
 // Deconstruct all variables in vuex's state into the global mixin...mapState($uStoreKey)
 }
}

//main.js
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

//main.js
import store from '@/store';

//Put the store into the Vue object creation const app = new Vue({
 store,
 ...App
})