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的数据持久化。在学习这个教程的小伙伴可以一起交流哦！