uni-app里的全局变量与数据持久化

全局变量

globalData

在 App.vue 可以定义 globalData ，globalData支持vue和nvue共享数据

定义：App.vue

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>  

js中操作globalData的方式如下：

赋值：getApp().globalData.text = 'test'

取值：console.log(getApp().globalData.text) // 'test'

如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。

vue的状态管理模式

uni-app是基于vue的，因此也可以使用vue的状态管理模式，来保持和持久化数据

状态管理

使用vuex管理共享状态

vuex

vuex-persistedstate

用来持久化

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

在store.js中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    name:''
  },
  getters: {
    name:(state)=>{
        return state.name
    }
  },
  mutations: {
    increment (state) {
      state.count++
    },
    changeName (state,aname) {
      state.name=aname
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})


export default store