首發于： https://lonhon.top
最近遇到的一個場景，由于項目的權限系統+路由控制中用到了vuex存儲全局數據，在登出時需要將所有數據進行重置or清空。

比如 store.state.username初始為'' => 登陸后變成'張三' => 登出后還是'張三'，此時需要置為''.

解決方法0.1

actions.resetVuex = function() {store.commit(state.a, null)store.commit(state.b, null)store.commit(state.c, null)... }store.dispatch('resetVuex')

一開始的想法是創建一個action實現vuex重置，在登出時調用該放方法即可。

** 但是 ** 這種方法需要手動維護，而且一個個寫上去感覺太low了，隨后又想到可以通過遍歷store.state進行所有重置，但是這種方法有一個弊端就是如果重置的值有不同的初始值的話，賦值的時候就很麻煩了。

總之，上面的方法和搜索出來的方法都不盡人意，但是迫于無奈就先用著第一種了。

解決方法1.0

就在上述方法寫到一半的時候忽然靈光一閃，我特么之前為了store的數據持久化不被頁面F5重置還專門把數據放在SessionStorage這些本地存儲里，現在一個個去重置感覺像個睿智，** 在登出的時候刷新頁面就能達到store重置的效果了 **。

通過頁面重載方法window.location.reload()可以手動刷新頁面，下面上完善流程代碼:

// 1.登出方法 logout() {window.localStorage.clear()window.sessionStorage.clear()clearCookie()this.$router.push({ name: 'Login' }) }// 2.登錄頁面 / js部分 data() {return {isReload: false // 默認不顯示頁面內容} }, created() {if (this.$store.getters.addRouters.length > 0) { // 判斷是否已經刷新return window.location.reload()}// 正式顯示頁面內容this.isReload = true }// 3.登錄頁面 / template部分 <template><div v-if="isRolad">...</div> </template>

注意，在登錄頁面的created鉤子中，如果直接進行reload方法，會出現頁面連續刷新的問題:登錄頁面加載到一半，內容已經顯示的情況下會再次刷新，這種體驗肯定要被產品懟差評。

所以此處用到兩個方法來解決兩次刷新的問題

登錄頁面中template使用v-if控制顯示

根據store是否有數據判斷是否重置，如果數據還有值，則reload()，此時因為isReload的默認值為false，所以登錄頁面在刷新前不會顯示任何內容。刷新后，將isRolad賦值為true從而顯示頁面內容。

最后，一個簡單的reload方法就完成了vuex的重置。

轉載于:https://www.cnblogs.com/lonhon/p/9099033.html

總結

以上是生活随笔為你收集整理的快速重置vuex数据 - Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。