Схема сброса состояния простоя vuex

внешний интерфейс API Vue.js Vuex

предисловие

Для больших одностраничных приложений (последнее относится к spa) мы часто используем менеджер состояний vuex для решения таких задач, как совместное использование состояния и передача состояния между компонентами. Такие приложения варьируются от десятков отдельных страниц до сотен отдельных страниц. При частом переключении маршрутов в vuex будет все больше и больше состояний, соответствующих каждому маршруту. Чтобы достичь максимальной оптимизации страницы, нам нужно сбросить эти состояния простоя, чтобы уменьшить занимаемый объем памяти.

какое состояние можно сбросить

Vuex делает упор на использование централизованного хранилища для управления состоянием всех компонентов приложения, но если мы действительно поместим все состояние в хранилище, разработка будет очень болезненной. Здесь, если вы хотите контролировать, какими данными нужно управлять в хранилище, вы должны сначала понять, для решения какой проблемы используется vuex. Официальный сайт Vuex указал, что он должен решитьНесколько компонентов имеют общее состояние, то мы можем поместить общее состояние нескольких компонентов в хранилище для управления.Совместное использование нескольких компонентов здесь во многих случаях является компонентом перекрестной маршрутизации для одностраничных приложений. Если в хранилище хранится только состояние, совместно используемое несколькими компонентами, то нам не нужно очищать состояние в vuex, потому что эти состояния будут использоваться в любое время.

По мере того, как бизнес-сценарии становятся все более и более сложными, много логики для взаимодействия с фоном также помещается в компоненты, поэтому код становится очень беспорядочным, а vuex используется не полностью. В это время мы можем вынести логику взаимодействия с фоновым апи в действие в vuex для обработки, а статус, возвращаемый фоном, естественно будет помещен в управление магазином. После этой обработки компонент отвечает только за рендеринг данных, и логика очень понятна. В это время состояние в хранилище, соответствующее компоненту, будет увеличиваться при переключении маршрутов, и эти состояния нужно очищать вручную.

Во многих решениях есть компромиссы: если данные, взаимодействующие с фоновым API, занести в компонент, его не нужно будет чистить, но логика кода станет более хаотичной. Другие плагины, такие как vuexvue-devtoolsНе будет возможности следить за изменением данных каждого запроса...

Когда сбросить состояние

Эффект, который мы хотим, состоит в том, чтобы сбросить состояние в vuex, соответствующее предыдущему маршруту, когда маршрут переключается, но между маршрутами и vuex нет однозначного соответствия, Если мы хотим достичь этого эффекта, нам нужно поддерживать Соответствующая связь между маршрутом и модулем vuex будет очень громоздкой. Лучше сбросить все состояния в vuex при изменении маршрута.

Как очистить состояние простоя в vuex

Следующие будут сочетатьсямой экземпляр на гитхабеДля иллюстрации в этом примере создается одностраничное приложение, и мы очищаем состояние простоя, переключая маршруты.

Изменить состояние модуля компонента, соответствующего маршруту

В примере хранилище разделено на несколько модулей, состояние компонента, соответствующее маршруту, помещается в соответствующий модуль, а состояние, совместно используемое несколькими компонентами, управляется в хранилище верхнего уровня. Примерно так:

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    modules: { // 每个路由对应的 module
        page1,
        page2,
        page3,
        page4,
        page5
    },
    plugins: __DEV__ ? [createLogger()] : [],
    strict: __DEV__ ? true : false
});

Состояние модуля, соответствующего странице маршрута1, следующее:

// store/modules/page1.js
const state = {
     // 列表数据
     page1Data: [],
     // 标题数据
     page1Title: ''
}

Эти данные возвращаются и копируются путем вызова внутреннего API.Если мы сбрасываем данные при изменении маршрута, нам нужно извлечь данные инициализации и предоставить метод идентификации, который необходимо сбросить.initState(), что означает, что его необходимо сбросить при изменении маршрута.Конечно, это имя метода является условным, и вы также можете определить его как другие имена. После преобразования это:

// store/modules/page1.js

// 放置你要重置的数据
const initState = {

    page1Data: [],
}

// state
const state = {
    // 参数解构
    ...initState,

    // 路由改变不想重置的数据
    page1Title: '',

    initState(){

        return initState
    }
}

Конфигурация глобального модуля

Определить тип события глобальной мутации

// store/types.js
export const RESET_STATES = 'resetStates'

определить глобальную мутацию

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

    const mState = state[moduleState];

    if (mState.initState && typeof mState.initState === 'function') {

        const initState = mState.initState();

        for (const key in initState) {

            mState[key] = initState[key];
        }
    }

}

export default {

    [types.RESET_STATES](state, payload) {

        for (const moduleState in state) {

            resetState(state, moduleState);
        }
    },

}

определить глобальное действие

// store/action.js
import * as types from './types'

export default {
    // rest state action
    resetStates:function (context, payLoad) {

        context.commit(types.RESET_STATES, payLoad);
    }
}

Метод сброса триггера переключения маршрута

Пока все готово, просто запускаем метод сброса при изменении маршрута и обрабатываем его в входном vue-файле

// components/app.vue
<script>
    import {mapState, mapActions} from "vuex"
    export default{

        methods: {

            ...mapActions({
                resetStates: "resetStates"
            })
        },

        watch: {

            $route(to, from) {
                // 路由改变发起重置
                this.resetStates();
            }
        }
    }
</script>

Если у вас установлен браузер Chromevuejs-devtoolsПри переключении маршрута отчетливо виден процесс сброса данных последнего маршрута.

Суммировать

Пример нажмите здесь. Наш сброс состояния vuex здесь состоит в том, чтобы проходить все состояния в хранилище каждый раз, когда маршрут переключается, и помещатьinitState()Было бы лучше, если бы состояние, соответствующее текущему роуту, можно было сбросить, но роут не имеет отношения к модулю в магазине. Это просто решение для сброса состояния vuex.Если есть лучшее решение, оставьте сообщение. Если что-то не так, пожалуйста, оставьте сообщение.

--над--

Категории