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

devtools/2024/12/23 10:10:54/

小程序开发中,数据的存储与获取是一个非常重要的环节。本文将介绍如何在小程序中使用 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/devtools/144656.html

相关文章

Android学习(六)-Kotlin编程语言-数据类与单例类

假设我们要创建一个表示书籍的数据类 Book&#xff0c;包含书名和作者两个字段。在 Java 中&#xff0c;代码如下&#xff1a; public class Book { String title; String author; public Book(String title, String author) { this.title title; this.author author; } Ove…

校园点餐订餐外卖跑腿Java源码

简介&#xff1a; 一个非常实用的校园外卖系统&#xff0c;基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化&#xff0c;提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合&am…

Vue项目的iconfont引入

目录 前言引入结果一些问题 前言 由于我用axure进行原型设计时&#xff0c;没有记住用的是哪个网站的icon了&#xff08;我收藏了挺多外网内网的icon网站&#xff0c;找了一遍还是没找到&#xff09;&#xff0c;现在编程网页时&#xff0c;发现我好像不能在axure里复制svg代码…

Apache解析漏洞(apache_parsingCVE-2017-15715)

apache_parsing 到浏览器中访问网站 http://8.155.8.239:81/ 我们写一个木马 1.php.jpg 我们将写好的木马上传 会得到我们上传文件的路径 我们访问一下 发现上传成功 发现木马运行成功&#xff0c;接下来使用蚁剑连接我们的图片马 获取 shell 成功 CVE-2013-454 我们还是到…

我的个人博客正式上线了!

我的个人博客终于上线啦点此访问 经过一番折腾&#xff0c;我的个人博客终于上线啦&#xff01;这是一个属于我自己的小天地&#xff0c;可以用来记录生活点滴、技术分享以及一些随想。 在这里&#xff0c;我想分享一下搭建博客的整个过程和心得体会。 为什么要搭建博客&…

面试小札:Java后端闪电五连鞭_8

1. Kafka消息模型及其组成部分 - 消息&#xff08;Message&#xff09;&#xff1a;是Kafka中最基本的数据单元。消息包含一个键&#xff08;key&#xff09;、一个值&#xff08;value&#xff09;和一个时间戳&#xff08;timestamp&#xff09;。键可以用于对消息进行分区等…

【持续更新】Github实用命令

Intro 最近高强度使用github&#xff0c;遂小计于此作为备忘。 Basic github是一个代码管理软件&#xff0c;能够track文件变动并且管理版本&#xff0c;是当代coding必不可少的工具。当你安装好github在本地以后&#xff0c;你可以通过以下命令初始化当前文件夹&#xff08…

【蓝桥杯每日一题】扫描游戏——线段树

扫描游戏 蓝桥杯每日一题 2024-12-13 扫描游戏 线段树 模拟 题目大意 有一根围绕原点 O 顺时针旋转的棒 O A OA OA ,初始时指向正上方 (Y 轴正向)。 在平面中有若干物件, 第 i 个物件的坐标为 ( x i , y i ) (x_i,y_i) (xi​,yi​), 价值为 z i z_i zi​ 。当棒扫到某个 物件…