小程序中使用 Vue2 + Vuex 实现数据存储与获取

news/2024/12/21 10:24:36/

小程序开发中,数据的存储与获取是一个非常重要的环节。本文将介绍如何在小程序中使用 Vue2 和 Vuex 实现数据的存储与获取。我们将通过一个具体的例子来展示如何在 Vuex 中管理用户信息和机构信息,并在组件中使用这些数据。

项目结构

首先,我们来看一下项目的基本结构:

src/
├── common/
│   └── api.js
├── store/
│   ├── index.js
│   └── modules/
│       └── user.js
├── components/
│   └── InstitutionPicker.vue
├── pages/
│   ├── Mine/
│   │   └── Mine.vue
│   └── Index/
│       └── Index.vue
└── App.vue

Vuex 模块化管理

我们将用户信息和机构信息的管理放在 store/modules/user.js 文件中。以下是 user.js 文件中与机构相关的代码:

import api from '@/common/api.js';
import * as mutation from '../mutations.js';export default {namespaced: true,state: {institutions: [], // 机构信息列表selectedInstitution: {}, // 当前选中的机构信息stuName: '' // 添加 stuName 到 state},getters: {// 获取当前选中的机构信息selectedInstitution(state) {return state.selectedInstitution;},// 获取所有机构信息institutions(state) {return state.institutions;},// 获取学生名stuName(state) {return state.stuName;}},mutations: {// 设置机构信息[mutation.SET_INSTITUTIONS](state, institutions) {state.institutions = institutions;state.selectedInstitution = institutions[0]; // 默认选中第一个机构},// 设置当前选中的机构信息[mutation.SET_SELECTED_INSTITUTION](state, institution) {state.selectedInstitution = institution;state.stuName = institution.stu_name; // 更新 stuName// 保存到本地存储wx.setStorageSync('selectedInstitution', institution);}},actions: {// 获取机构信息,接受参数getInstitutions({ commit }, tal_id) {return new Promise((resolve, reject) => {api.postInstitutions({ tal_id }).then(res => {commit(mutation.SET_INSTITUTIONS, res.list);resolve(res.list);}).catch(err => {reject(err);});});},// 设置当前选中的机构信息setSelectedInstitution({ commit }, institution) {commit(mutation.SET_SELECTED_INSTITUTION, institution);}}
};

组件中使用 Vuex 数据

Mine 组件(个人中心组件)

注意:index组件(主页面)用法与Mine组件类似

Mine.vue 组件展示了如何在组件中使用 Vuex 数据,并通过 actions 获取和设置数据。

<template><view><div class="school-details" @click="toggleInstitutionList">// 其他实现逻辑,比如数据展示等</div>
<InstitutionPicker :show="showInstitutionList" @confirm="selectInstitution" @close="toggleInstitutionList" /></view>
</template>
import { mapGetters, mapActions } from 'vuex';export default {components: {InstitutionPicker // 引入子组件名称},data() {return {showInstitutionList: false, // 控制机构列表显示隐藏};},computed: {...mapGetters('user', ['selectedInstitution', 'institutions', 'stuName']) // 获取本地数据},mounted() {this.fetchInstitutions(); // 获取机构信息},methods: {...mapActions('user', ['getInstitutions', 'setSelectedInstitution']),// 获取机构信息fetchInstitutions() {const tal_id = uni.getStorageSync("talId");this.getInstitutions(tal_id).then(res => {// 获取本地存储的选中机构信息const storedInstitution = wx.getStorageSync('selectedInstitution');if (storedInstitution) {this.setSelectedInstitution(storedInstitution);}})},// 切换机构列表显示隐藏toggleInstitutionList() {this.showInstitutionList = !this.showInstitutionList;},// 选择机构selectInstitution(institution) {this.setSelectedInstitution(institution);wx.setStorageSync('selectedInstitution', institution);this.showInstitutionList = false;}}
};

InstitutionPicker 组件

注意:使用参照Mine组件<script>部分

InstitutionPicker.vue 组件展示了如何在子组件中使用 Vuex 数据,并通过 props 接收父组件传递的数据。(主要按需展示数据、选中emit确定事件和取消事件)

<template><view class="pickerCss"><u-picker :show="show" :columns="[formattedInstitutions]" @confirm="confirm" keyName="displayName" immediateChange:defaultIndex="[defaultIndex]" @cancel="closeSelectDate" class="picker"></u-picker></view>
</template>

大致效果 

登录后单选且必选(主页面)

选中后主页展示相关信息

我的页面展示存储数据(可切换信息,切换之后主页面相关信息同步修改)

总结

通过以上示例,我们可以看到在小程序中使用 Vue2 和 Vuex 实现数据存储与获取的基本步骤:

  1. 定义 Vuex 模块:在 store/modules 目录下定义 Vuex 模块,管理相关的 state、getters、mutations 和 actions。
  2. 在组件中使用 Vuex 数据:通过 mapGetters 和 mapActions 将 Vuex 的 state 和 actions 映射到组件的 computed 和 methods 中。
  3. 使用本地存储:在需要持久化数据的地方使用 wx.setStorageSync 和 wx.getStorageSync 进行本地存储和读取。

通过这种方式,我们可以更好地管理小程序中的数据,提升代码的可维护性和可读性。


http://www.ppmy.cn/news/1556902.html

相关文章

scala中正则表达式的使用

正则表达式&#xff1a; 基本概念 在 Scala 中&#xff0c;正则表达式是用于处理文本模式匹配的强大工具。它通过java.util.regex.Pattern和java.util.regex.Matcher这两个 Java 类来实现&#xff08;因为 Scala 运行在 Java 虚拟机上&#xff0c;可以无缝使用 Java 类库&…

STM32-- keil -常用功能

1.修改整个工程名称&#xff08;keil-c51编辑器&#xff09; 要同时修改这三个文件&#xff0c;不然要重新设置。 uvoptx文件 uvoptx文件记录了工程的配置选项&#xff0c;如下载器的类型、变量跟踪配置、断点位置以及当前已打开的文件等等&#xff1b; uvguix文件 uvguix文…

前端TypeScript学习day01-TS介绍与TS部分常用类型

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持&#xff1f;? TypeScript …

拦截器魔法:Spring MVC中的防重放守护者

目录 简介HandlerInterceptorAdapter vs HandlerInterceptor创建一个防重放拦截器注册拦截器路径模式匹配适配器模式的魅力总结 简介 在构建安全可靠的Web应用程序时&#xff0c;防止请求重放攻击是一项关键任务。当用户或系统发出的请求被恶意第三方捕获并重复发送给服务器…

Node.js安装(含npm安装vue-cli,安装element-ui)的详细配置

搭建前端框架 前端平台 量子计算机–10^5级别运算只需5min&#xff0c;这代表可以计算从宇宙大爆炸到现在的数据可以计算 安卓工程师–.xml node.js 下载 运行在win/linus的js——node.js 安装 建议不要动路径&#xff0c;可以避免很多问题&#xff0c;但是要保证C盘有至少1…

程序算术题-5

程序算术题-5 求这一天是在这一年的多少天题目逻辑方法一方法二 实例代码 求这一天是在这一年的多少天 题目 输入某年某月某日&#xff0c;判断这一天是这一年的第几天&#xff1f; 逻辑 /*** 求这一天是这一年的多少天* args[0] 年* args[1] 月* args[2] 日*/第一个输入参数…

点亮技术写作之路:CSDN文章创作秘籍分享

一、引言 &#xff08;一&#xff09;技术文章的重要性 在当今技术飞速发展的时代&#xff0c;优秀的技术文章扮演着举足轻重的角色&#xff0c;其重要性体现在多个关键方面。 首先&#xff0c;它是知识传承的核心载体。技术领域的知识如同浩瀚星辰&#xff0c;新的理念、方法…

在Linux系统中, 查询mysql

在Linux系统中&#xff0c;MySQL的启动文件通常位于/etc/init.d目录下&#xff0c;文件名通常以mysql或者mysqld开头。你可以使用以下命令来查找MySQL的启动脚本&#xff1a; sudo find / -name "mysql*" -type f 这个命令会搜索整个文件系统来找到所有以mysql开头…