### 实现
Vue3 中 UniApp 与
Vuex 状态
持久化的方案
为了在
Vue3 的 UniApp 应用程序中实现
Vuex 状态管理的
持久化存储，可以遵循以下方法：
#### 创建 Store 文件结构并配置
Vuex 和 `
vuex-persistedstate`
首先，在项目的根目录下创建名为 `store` 的文件夹，并在其内部建立 `index.js` 文件用于初始化
Vuex 存储实例。此过程中会安装必要的依赖项以及设置
持久化机制。
```
javascript
// store/index.js
import { createStore } from &#
39;
vuex&#
39;
import createPersistedState from &#
39;
vuex-persistedstate&#
39;
export default createStore({
state: {
// 定义初始状态属性...
},
mutations: {
// 定义改变状态的方法...
},
actions: {
// 定义异步操作逻辑...
},
getters: {
// 定义计算派生状态...
},
plugins: [
createPersistedState({
storage: {
getItem: (key) => uni.getStorageSync(key),
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})
]
})
```
这段代码展示了如何通过自定义 `storage` 对象适配器来利用 `uniapp` 提供的同步 API (`uni.getStorageSync`, `uni.setStorageSync`) 来保存和读取
本地缓存的数据[^
3]。
#### 注册全局 Store 实例到应用入口处
接着，在项目的主要
JavaScript 文件（通常是 `main.js` 或者对于 UniApp 可能是 `App.
vue`），注册之前构建好的
Vuex Store 到整个应用程序上下文中去。
```
javascript
// main.js or App.
vue <script>
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;./App.
vue&#
39;;
import store from &#
39;./store&#
39;;
const app = createApp(App);
app.use(store);
app.mount(&#
39;#app&#
39;);
```
这里说明了怎样把已经准备完毕的状态管理系统挂载至
Vue 实例上以便于组件间共享访问[^2]。
#### 使用 State 数据绑定视图层展示
最后一步是在模板内声明响应式的变量并通过映射工具函数如 `mapState()` 将其连接起来显示给用户看；同时也可以调用分发事件触发相应的业务流程
处理动作。
```html
<!-- 组件 .
vue -->
<template>
<div>{{ id }}</div> <!-- 显示来自 store 的 id 属性 -->
</template>
<script>
import { mapState } from &#
39;
vuex&#
39;;
export default {
computed: {
...mapState([&#
39;id&#
39;]),
},
};
</script>
```
上述片段解释了如何借助辅助函数简化对集中式
仓库里特定字段的选择过程，并将其结果作为计算属性的一部分参与页面渲染工作流之中[^4]。
本文介绍了如何通过在Pinia中使用`pinia-plugin-persistedstate`插件，实现JavaScript应用中的数据本地持久化存储，确保刷新页面数据不丢失的过程。
扫一扫
5139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
