uniapp 中使用 vuex 如何做数据持久化?

uniapp 中使用 vuex 如何做数据持久化?

最近在学习uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘 ,不得不说 uni-app对于会vue的小伙伴是那么的友好,用起来得心应手。在项目当中正好遇到一个关于搜索历史数据持久化的功能,教程当中讲的非常详细,受益匪浅啊,今晚整理到这里。

uni-app 中内嵌了 vuex,所以可以直接使用,但是我们知道vuex虽然好用,但是无法做数据之久化,那么今天就分享一下在uni-app 中如何实现数据持久化。

第一步: uni-app 使用vuex

step 1: 新建 store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		
	},
	mutations:{
		
	},
	actions: {
		
	}
})

export default store

step2: 在main.js用引入 store

import Vue from 'vue'
import App from './App'
import api from './common/api'
import store from './store/index.js'

Vue.config.productionTip = false
Vue.prototype.$api = api


App.mpType = 'app'

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

第二步:利用本地缓存实现数据持久化

  • step1: 获取本地缓存: uni.getStorageSync(“_history”)
  • step2: 存入本地缓存: uni.setStorageSync(‘_history’,list)
  • step3: 清空本地缓存: uni.removeStorageSync(‘_history’)

const store = new Vuex.Store({
	state:{
		// vuex 做数据持久化: 如果本地缓存存在则使用缓存数据,反之设置为[]
		historyLists: uni.getStorageSync("_history") || []
	},
	mutations:{
		SET_HISTORY_LISTS(state, history) {
			state.historyLists = history
		},
		CLEAR_HISTORY(state) {
			state.historyLists = []
		}
	},
	actions: {
		set_history({commit, state}, history){
			let list = state.historyLists
			list.unshift(history)
			// 存入本地缓存
			uni.setStorageSync('_history',list)
			commit('SET_HISTORY_LISTS', list)
		},
		clear_history({commit}){
			uni.removeStorageSync('_history')
			commit('CLEAR_HISTORY')
		}
	}
})

通过uniapp 自身的方法就可以实现vuex的数据持久化。在学习这个教程的小伙伴可以一起交流哦!

微信关注“优月优”公众号,获取更多学习资源
公告:因版权方要求,取消所有书籍分享功能,请支持正版资源,谢谢关注。
微信公众号
关注我们,每天及时接收最新的学习资料
14800人已关注
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏