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

在小程序开发中，数据的存储与获取是一个非常重要的环节。本文将介绍如何在小程序中使用 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 实现数据存储与获取的基本步骤：

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

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