uniapp中使用vuex并持久化的方法示例

更新時間：2023年06月20日 12:02:00 作者：卷毛十口

vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個倉庫,下面這篇文章主要給大家介紹了關于uniapp中如何使用vuex并持久化的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

準備

根目錄下創(chuàng)建store文件夾，內(nèi)部創(chuàng)建index.js

一、插件實現(xiàn)

地址：vuex-persistedstate - npm

1.安裝插件

代碼如下（示例）：

npm install --save vuex-persistedstate

2.index.js配置：

import api from '@/static/api/index.js' // 引入接口
import createPersistedState from 'vuex-persistedstate' // 引入數(shù)據(jù)持久化插件
import Vue from 'vue' // 導入vue包
import Vuex from 'vuex' // 導入vuex包
Vue.use(Vuex); // vue的插件機制使用vuex
 
 
// 創(chuàng)建Vuex：構(gòu)造函數(shù)創(chuàng)建store常量
const store = new Vuex.Store({
	// state：提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到store中的state存儲
	state: {
		// 持久化常用參數(shù)
		token: uni.getStorageSync('vuex').token, // token
		userId: uni.getStorageSync('vuex').userId, // 用戶id
	},
 
 
	// mutations 同步變更state數(shù)據(jù)，傳多個參數(shù)需要用對象的方式
	mutations: {
		// 保存TOKEN
		SET_TOKEN: (state, token) => {
			state.token = token
		},
 
		// 保存用戶ID
		SET_ID: (state, id) => {
			state.userId = id
		},
 
		// 定義全局的清理方法
		RESET_ALL_STATE(state) {
			state.token = '';
			state.userId = '';
		},
	},
 
	// actions 異步變更state數(shù)據(jù)
	actions: {
		// 登陸，持久化存儲token，id
		loginApi(context, data) {
			return new Promise((resolve, reject) => {
				api.userLogin(data).then(res => {
					const {
						token,
						user_id,
					} = res.data
 
					context.commit('SET_ID', id)
                    context.commit('SET_TOKEN', token)  
				}).catch(err => {
					reject(err)
				})
			})
		},
 
 
		// 退出登陸清空state
		logout(context) {
			return new Promise((resolve, reject) => {
				context.commit('RESET_ALL_STATE')
			})
		}
	},
 
 
	// getters 用于對store中的已有數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)，如果store中的數(shù)據(jù)發(fā)生變化，
	getters: {},
 
	// plugins 插件配置
	plugins: [
		createPersistedState({
			paths: ['token', 'userId'],
			storage: { // 存儲方式定義  
				getItem: (key) => uni.getStorageSync(key), // 獲取  
				setItem: (key, value) => uni.setStorageSync(key, value), // 存儲  
				removeItem: (key) => uni.removeStorageSync(key) // 刪除  
			}
		})
	]
})
 
export default store

插件的api說明：

key: 存儲持久狀態(tài)的key（默認vuex）
reduce：存儲持久狀態(tài)的key（默認vuex）
paths ：部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒有路徑給出，完整的狀態(tài)是持久的。（默認：[]）
reducer ：一個函數(shù)，將被調(diào)用來基于給定的路徑持久化的狀態(tài)。默認包含這些值。
subscriber ：一個被調(diào)用來設置突變訂閱的函數(shù)。默認為store => handler => store.subscribe(handler)
storage ：而不是（或與）getState和setState。默認為localStorage。
getState ：將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)。默認使用storage。
setState ：將被調(diào)用來保持給定狀態(tài)的函數(shù)。默認使用storage。
filter ：將被調(diào)用來過濾將setState最終觸發(fā)存儲的任何突變的函數(shù)。默認為() => true

3.獲取持久化數(shù)據(jù)（比如登錄頁）：

login() {
    this.$store.dispatch('loginApi', data).then(res => {
		uni.reLaunch({
			url: '/pages/index/index'
		});
	})
}

4.使用state（比如個人主頁）：

<template>
	<view>
		<text>{{id}}</text> 
	</view>
</template>
<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {}
		},
		computed: {
			...mapState(["id"),
		},
	}
</script>

二、本地存儲實現(xiàn)

代碼如下（示例）：

import api from '@/static/api/index.js' // 引入接口
import createPersistedState from 'vuex-persistedstate' // 引入數(shù)據(jù)持久化插件
import Vue from 'vue' // 導入vue包
import Vuex from 'vuex' // 導入vuex包
Vue.use(Vuex); // vue的插件機制使用vuex
 
const store = new Vuex.Store({
	// state：提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到store中的state存儲
	state: {
		// 持久化
		test: uni.getStorageSync('test'),
	},
 
 
	// mutations 同步變更state數(shù)據(jù)，傳多個參數(shù)需要用對象的方式
	mutations: {
        // 也可以用 JSON.parse(JSON.stringify(test))
		SET_TEST: (state, test) => {
			state.test = test
			uni.setStorageSync('test', state.test)
		}
	},
 
	// actions 異步變更state數(shù)據(jù)
	actions: {
		// 持久化實現(xiàn)
		getTest(context, test) {
			context.commit('SET_TEST', test)
		}
	},
 
 
	// getters 用于對store中的已有數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)，如果store中的數(shù)據(jù)發(fā)生變化，
	getters: {}
})
 
export default store