uniapp的vuex数据持久化

在uniapp中，vuex的数据持久化可以通过使用`vuex-persistedstate`插件来实现。首先，需要引入`createPersistedState`插件和`vuex`包，并将`createPersistedState`插件作为`Vuex`的一个插件使用。然后，在`store`对象中的`state`中定义需要持久化的数据。可以使用`uni.getStorageSync`方法获取已有的持久化数据。接下来，在`mutations`中定义`SET_TEST`方法，它用于同步变更`state`中的数据，并使用`uni.setStorageSync`方法将数据存储到本地。在`actions`中定义`getTest`方法，它用于异步变更`state`中的数据，并调用`commit`方法触发`SET_TEST`方法。最后，在`getters`中可以对`store`中已有的数据进行处理形成新的数据。以上是一种实现vuex数据持久化的方式。

在使用后，可以通过浏览器的控制台进行调试，可以发现数据存放在`window.localStorage.vuex`中。这与uniapp提供的数据缓存API存放的数据位置是相同的。

如果想要获取持久化数据，可以在相应的组件中调用`this.$store.dispatch`方法，传递对应的`action`名和参数。例如，在登录页中可以调用`this.$store.dispatch('loginApi', data)`来获取持久化数据。

如果想要使用持久化数据，可以在相应的组件中使用`mapState`方法来获取`state`中的数据。例如，在个人主页中可以使用`{{id}}`来展示`state`中的`id`数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uniapp中使用vuex并持久化](https://blog.csdn.net/qq_35755436/article/details/129139623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [uniapp中Vuex数据持久化](https://blog.csdn.net/Mr_Bobcp/article/details/125876232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]