1. 简介

本文档介绍了如何在 uniapp 中使用 Vue2 和 Vuex 实现模块化状态管理，并使用 vuex-persistedstate 插件来进行持久化存储，确保状态在应用重新加载后能够持久化保存。

2. 项目结构

在我们的项目中，Vuex 被用来管理全局状态，vuex-persistedstate 用来保持状态的持久化存储。项目中的 Vuex 状态被分成多个模块，每个模块具有自己的状态、mutations 和 actions。

2.1 目录结构

src/
  ├── store/
  │    ├── modules/
  │    │   ├── counter.js
  │    │   └── userInfo.js
  │    └── store.js
  └── App.vue

3. 主要代码解析

3.1 store/store.js — 主入口

import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter'; // 引入模块文件
import userInfo from './modules/userInfo'; // 引入模块文件
import createPersistedState from 'vuex-persistedstate'; // 引入持久化插件

Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({
  modules: {
    counter, // 注册计数模块
    userInfo, // 注册用户信息模块
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => uni.getStorageSync(key), // 从本地存储获取数据
        setItem: (key, value) => uni.setStorageSync(key, value), // 将数据存储到本地
        removeItem: (key) => uni.removeStorageSync(key), // 删除本地存储数据
      },
      paths: ['counter', 'userInfo'], // 指定持久化的模块，这里持久化 counter 和 userInfo 模块
    }),
  ],
});

export default store;

• Vuex.Store 创建了一个 Vuex 仓库，包含了 counter 和 userInfo 两个模块。

• createPersistedState 是持久化插件，用于让 Vuex 的状态在页面刷新后依然保持不变。

• paths 属性用于指定哪些模块的数据需要被持久化。

3.2 store/modules/counter.js — 计数模块

export default {
  namespaced: true, // 启用模块化命名空间
  state: {
    count: 10, // 初始值
  },
  mutations: {
    increment(state) {
      state.count++; // 计数加1
    },
    decrement(state) {
      state.count--; // 计数减1
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // 调用 mutation 来增加计数
    },
    decrement({ commit }) {
      commit('decrement'); // 调用 mutation 来减少计数
    },
  },
};

• 该模块负责管理 count 状态，提供 increment 和 decrement 变更方法。

• namespaced: true 使得模块化命名空间生效，确保各个模块的 mutation 和 action 名称不会冲突。

3.3 store/modules/userInfo.js — 用户信息模块

export default {
  namespaced: true, // 启用模块化命名空间
  state: {
    count: 10, // 示例字段
  },
  mutations: {
    increment(state) {
      state.count++; // 计数加1
    },
    decrement(state) {
      state.count--; // 计数减1
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // 调用 mutation 来增加计数
    },
    decrement({ commit }) {
      commit('decrement'); // 调用 mutation 来减少计数
    },
  },
};

main.js

// #ifndef VUE3
import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;
import store from './store/index'; // 引入store文件
App.mpType = 'app';

const app = new Vue({
  ...App,
  store,
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue';
import App from './App.vue';
export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}
// #endif

4. 在组件中使用 Vuex

4.1 引入并使用 Vuex 状态

在组件中，你可以通过 this.$store.state 来访问状态，或通过 this.$store.commit() 和 this.$store.dispatch() 来触发 mutations 和 actions。

<template>
  <view>
    <text>当前计数: {{ count }}</text>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </view>
</template>

<script>
export default {
  computed: {
    // 通过 Vuex 获取计数
    count() {
      return this.$store.state.counter.count;
    },
  },
  methods: {
    increment() {
      // 提交 mutation 进行计数增加
      this.$store.dispatch('counter/increment');
    },
    decrement() {
      // 提交 mutation 进行计数减少
      this.$store.dispatch('counter/decrement');
    },
  },
};
</script>

• computed 用于从 Vuex 获取状态，这里获取的是 counter 模块的 count。

• methods 中通过 dispatch 来触发 actions，例如调用 counter/increment 来增加计数。

4.2 使用持久化存储

vuex-persistedstate 插件会自动处理将 counter 和 userInfo 模块的状态保存到本地存储中。即使刷新页面，状态仍然能够保留。

5. 注意事项

1. 命名空间：使用 namespaced: true 可以避免模块间命名冲突。如果不使用命名空间，需要在调用 mutation 和 action 时避免命名重复。

2. 持久化存储：默认情况下，vuex-persistedstate 会将指定的模块保存到 localStorage 中。你可以根据需要自定义存储方式，例如使用 uni.setStorageSync。

存储效果