小程序中使用 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 实现数据存储与获取的基本步骤：

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

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