清除vuex中存的数据

为了清除存储在Vuex中的数据，你可以使用以下方法：

1. 在刷新之前，使用本地存储来进行存储。你可以在存储Vuex函数后增加一个监听事件，当页面关闭时将数据保存到sessionStorage中。例如，在updata函数中添加以下代码：

   updata() {
     this.upTestData(this.vuexArrTest)
     window.addEventListener('unload', this.saveState())
   }

   saveState() {
     sessionStorage.setItem('state', JSON.stringify(this.TEST_DATA))
   }

2. 在Vuex的state数据中判断是否存在sessionStorage数据，如果存在则优先使用该数据。你可以将以下代码添加到state中：

   const state = {
     TEST_DATA: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : []
   }

3. 在需要引用state数据的地方，你可以使用`mapState`来引用TEST_DATA数据，例如：

   import { mapState } from 'vuex'
   // ...
   computed: {
     ...mapState({
       'TEST_DATA': state => state.one.TEST_DATA
     })
   }

4. 最后，在需要清除Vuex中存储的数据时，你可以使用`mutations`中的方法来更新TEST_DATA的值。例如：

   import { mapMutations } from 'vuex'
   // ...
   methods: {
     ...mapMutations('one', ['upTestData']),
     clearTestData() {
       this.upTestData([])
     }
   }

通过这些步骤，你可以清除Vuex中存储的数据。引用sessionStorage和localStorage可以帮助你在页面刷新后保留或清除数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vuex模块化写法 解决页面刷新Vuex中数据清空”问题](https://blog.csdn.net/weixin_35773751/article/details/121368249)[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_2"}}] [.reference_item style="max-width: 50%"]
- *3* [使用sessionStorage解决vuex在页面刷新后数据被清除的问题](https://download.csdn.net/download/weixin_38503233/12761323)[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_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]