关于将Vuex存储数据存入sessionStorage使用的过程

需求阐述：

在我们开发系统的时候往往在不同的模块需要调用相同的数据去展示或者供接口使用，所以可以通过将数据存储Vuex中再将其存入sessionStorage使用

过程：

1.创建store文件夹并创建index.js文件用于动态加载modules目录下所有.js文件，并将其导出的默认值存储到一个对象中

import Vue from 'vue'
import Vuex from 'vuex'
//store数据持久化
import createPersistedState from 'vuex-persistedstate'

// getter
import getters from './getters'

Vue.use(Vuex)

/**
 * 动态加载modules目录下所有.js文件，并将其导出的默认值存储到一个对象中。
 * 
 * @returns {Object} 包含所有模块默认导出的键值对对象。
 */
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	// 从模块路径中提取模块名
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = modulesFiles(modulePath)
	// 将模块的默认导出存储到modules对象中
	modules[moduleName] = value.default
	return modules
}, {})

/**
 * 创建一个Vuex.Store实例，用于管理应用的状态。
 * 
 * @param {Object} modules - Vuex模块对象，用于组织和管理状态。
 * @param {Object} getters - Vuex的getter方法对象，用于从状态中计算出衍生数据。
 * @return {Vuex.Store} 返回一个初始化好的Vuex.Store实例。
 */
const store = new Vuex.Store({
	modules,
	getters,
	// 应用插件来实现状态的持久化存储。
	plugins: [createPersistedState({
		// 使用sessionStorage来存储状态。
		storage: window.sessionStorage,
		// 定义一个reducer来缩小需要持久化的状态范围。
		reducer(val) {
			return {
				user: val.user, // 仅持久化demo部分的状态。
			}
		}
	})]
})

export default store

2.创建modules文件夹可以创建不同的js文件用来存储不同的对象

3.创建api用于调取后端接口

4.在modules文件夹下的文件去设置需要存储的数据

import Demo from '@/api/demo'
const getDefaultState = () => {
	return {
  // 初始化用户信息
		userName: '',
    userHeight:'',
    userWeight:'',
    userID:'',
	}
}

const state = getDefaultState()

const mutations ={

  	// 设置用户姓名
	SET_USER_ID: (state, userID) => {
		state.userID = userID
	},
	// 设置用户姓名
	SET_USER_NAME: (state, userName) => {
		state.userName = userName
	},
  	// 设置用户身高
	SET_USER_HEIGHT: (state, userHeight) => {
		state.userHeight = userHeight
	},
   	// 设置用户体重
	SET_USER_WEIGHT: (state, userWeight) => {
		state.userWeight = userWeight
	},

}


const actions = {
	/**
	 * 调用后端接口获取用户信息
	 * @param {Object} context 包含commit和state的对象，用于在Action中提交mutation和访问state
	 * @returns {Promise} 返回一个Promise对象，成功时resolve携带获取到的用户信息，失败时reject错误对象
	 */
	GetInfo({ commit, state }) {
		const params = {
			// 构造请求后端接口所需的参数
      userID:state.userID // 用户代码，从state中获取
		}
		return new Promise((resolve, reject) => {
			// 发起GET请求获取用户信息
			Demo.getDemo(params).then(response => {
				const data = response.data || {} // 获取响应数据，若无则设为空对象
				// 分别提交mutation来更新state中的用户姓名、身高和体重信息
				commit('SET_USER_NAME', data.userName)
				commit('SET_USER_HEIGHT', data.userHeight)
				commit('SET_USER_WEIGHT', data.userWeight)
				resolve(data) // 成功时resolve携带用户信息
			}).catch(error => {
				reject(error) // 发生错误时reject错误对象
			})
		})
	},
}

/**
 * 导出一个默认的对象，配置了 Vuex 的 store 模块的选项
 * 包括：命名空间设置、状态（state）、突变（mutations）和动作（actions）
 * 
 * @property {boolean} namespaced - 指定模块是否使用命名空间
 * @property {Object} state - 定义模块的初始状态
 * @property {Object} mutations - 定义可以修改状态的函数
 * @property {Object} actions - 定义异步操作或提交 mutation 的函数
 */
export default {
	namespaced: true,
	state,
	mutations,
	actions
}

5.创建getter.js用于从state中获取特定的用户信息。

6.创建Login.vue文件通过触发登录按钮的点击事件触发dispatch方法调用user模块的GetInfo方法(当然这个只是个简单的demo用于讲述存储的过程并没有详细写关于登录的细节)

<template>
  <div>
    <el-form :model="loginForm"> 
      <el-form-item label="账号">
        <el-input v-model="loginForm.account" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="loginForm.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginForm:{
        account: '',
        password: ''
      }
    };
  },
  methods: {
		// 用户登录:通过触发登录按钮调用login方法，通过dispatch方法调用user模块的GetInfo方法
		login() {
			this.$store.dispatch('user/GetInfo', this.loginForm).then(() => {
			}).finally(() => {
			})
		}
  },
};
</script>
<style scoped lang='scss'>

</style>

7.关键点：将vuex数据存在sessionStorage写在了store的index.js中