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

全局变量

globalData

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

定义:App.vue

  

  

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

版权声明:
作者:感冒的梵高
链接:https://www.techfm.club/p/47071.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>