亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vuex重置所有state(可定制)

singerye / 3077人閱讀

摘要：這里為什么是一個數(shù)組呢因為這就是標題所描述的可定制，如果頁面內(nèi)重置絕大部分狀態(tài)，但需要保留其中一些狀態(tài)的時候我們可以通過我們傳遞過來的值來剔除相應(yīng)的，使其不被更新。

在正式場景中我們經(jīng)常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變?yōu)槌跏紶顟B(tài)，
那么，就涉及到了多種方法：
1、頁面刷新：

window.location.reload()

這個方法通過路由判斷優(yōu)化或是邏輯優(yōu)化，始終頁面時重新加載，就會導致用戶體驗很差，對瀏覽器來說也是一種不必要的負擔，
所以我嘗試之后就放棄了。

2、寫一個重置的方法然后調(diào)取

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

store.dispatch("resetVuex")

這樣又會出現(xiàn)多個module，多個state，需要手動添加多個，工作量巨大且不易維護，而且如果我們state初始是個個數(shù)組，一個對象這些更不好操作，更優(yōu)最多就是我們初始的時候深拷貝一份，但是也需要每個module里進行操作和封裝

這兩種方法是可以解決問題的，但是我還是沒有采用這兩種方式，因為感覺已經(jīng)犧牲了某些東西來達成目的了，通過我反復的實踐，和摸索我采取了以下方法：

首先頁面加載，第一次加載引入store的時候，store的所有state肯定是初始值，那么我就做一個本地緩存記錄下來：
這里我采用了store插件（引用方式參考 https://github.com/nbubna/store）

在main.js創(chuàng)建vue實例之前：

import _store from "store"
import createStore from "./store"
...

const store = createStore() //我創(chuàng)建好的 vuex庫
_store({ initState: store.state })  //緩存一個名為initState的初始狀態(tài)

我們知道m(xù)ain.js是頁面載入的時候執(zhí)行一次的那么緩存的initState就是自己最開始創(chuàng)建store里的state狀態(tài)
(包含了module里的所有state)；

然后我們在store創(chuàng)建的全局寫一個mutation方法
這里我采用了store插件（引用方式參考 https://github.com/nbubna/store）
這里我采用了lodash插件（引用方式參考 https://www.lodashjs.com/）

import _ from "lodash"
import _store from "store2"
...

const store = new Vuex.Store({
    state: {
      token: ""
    },
    mutations: {
      resetAllState (state, payload = []) {
        if (payload instanceof Array === false) { // 驗證傳入的是一個數(shù)組
          return
        }
        
        const initState  = _store("initState") // 取出初始值的緩存
        const _initState = payload.length ? _.omit(initState, payload) : initState // 判斷傳入值有無數(shù)據(jù)，有數(shù)據(jù)剔除相對應(yīng)的值
        
        _.extend(state, _initState)
      }
    },
    modules: {
     ...
    }
    }）

這個名叫resetAllState的mutation方法里就是講全局的state替換成我們緩存的state。
這里為什么 payload 是一個數(shù)組呢？
因為這就是標題所描述的可定制，如果頁面內(nèi)重置絕大部分狀態(tài)，但需要保留其中一些狀態(tài)的時候我們可以通過我們傳遞過來的state值來剔除相應(yīng)的state，使其不被更新。
當然我們也可以傳入值來更新相應(yīng)值，其他所有值不進行更新（這里我們就不詳細說明）

以上，就是我實踐思考出來的方法，可能有不足的地方，歡迎大家提問、交流或提出更好的建議。謝謝

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101139.html

相關(guān)文章

  • vuex重置所有state(可定制)

    摘要：這里為什么是一個數(shù)組呢因為這就是標題所描述的可定制，如果頁面內(nèi)重置絕大部分狀態(tài)，但需要保留其中一些狀態(tài)的時候我們可以通過我們傳遞過來的值來剔除相應(yīng)的，使其不被更新。 在正式場景中我們經(jīng)常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變?yōu)槌跏紶顟B(tài)，那么，就涉及到了多種方法：1、頁面刷新： window.location.reload() 這個方法通過路由判斷...

    LeviDing 評論0 收藏0

  • vuex 閑置狀態(tài)重置方案

    摘要：為了做到頁面的極致優(yōu)化，我們需要將那些閑置的狀態(tài)重置，以減小占用的內(nèi)存空間。不如當路由改變時去重置中的所有狀態(tài)。這里只是提供一種重置狀態(tài)的一種方案，如果有更好方案還請各位看官留言。 前言 大型單頁應(yīng)用（后面都是指spa），我們往往會通過使用狀態(tài)管理器 vuex 去解決組件間狀態(tài)共享與狀態(tài)傳遞等問題。這種應(yīng)用少則幾十個單頁，多則上百個單頁。隨著路由的頻繁切換，每個路由對應(yīng)的 vuex 中...

    junfeng777 評論0 收藏0

  • 快速重置vuex數(shù)據(jù) - Vue

    摘要：首發(fā)于最近遇到的一個場景，由于項目的權(quán)限系統(tǒng)路由控制中用到了存儲全局數(shù)據(jù)，在登出時需要將所有數(shù)據(jù)進行重置清空。刷新后，將賦值為從而顯示頁面內(nèi)容。最后，一個簡單的方法就完成了的重置。 首發(fā)于： https://lonhon.top最近遇到的一個場景，由于項目的權(quán)限系統(tǒng)+路由控制中用到了vuex存儲全局數(shù)據(jù)，在登出時需要將所有數(shù)據(jù)進行重置or清空。 比如 store.state.usern...

    wyk1184 評論0 收藏0

  • Vue.js 實踐（3）：實現(xiàn)一個漂亮、靈活、可復用的提示組件

    摘要：接下來，由簡入繁依次實現(xiàn)提示組件的各個功能。那么第一個提示的定時器依然會錯誤的關(guān)閉新提示。增強靈活性最后則是讓提示組件更靈活。 這次的教程里，我們要把組件化進行到底！最近半年的幾個項目中，都遇到了需要使用Toast或者Notification組件的情況。在目前已有的一些基于Vue.js開發(fā)的組件庫，都沒有找到太合適的，所以自己重頭實現(xiàn)了一個。歷經(jīng)幾個項目的磨練，這個提示組件的功能已經(jīng)越...

    Olivia 評論0 收藏0

發(fā)表評論

0條評論

singerye

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<