web-dev-qa-db-de.com

Wie lösche ich den Status im vuex store?

Mein Zustand im Vuex Store ist riesig.

Gibt es eine Möglichkeit, alle Daten im Status auf einmal zurückzusetzen, anstatt alles manuell auf Null zu setzen?

14
KaliCharan

Ich habe gerade die großartige Lösung gefunden, die für mich funktioniert.

const getDefaultState = () => {
  return {
    items: [],
    status: 'empty'
  }
}

// initial state
const state = getDefaultState()

const actions = {
  resetCartState ({ commit }) {
    commit('resetState')
  },
  addItem ({ state, commit }, item) { /* ... */ }
}

const mutations = {
  resetState (state) {
    Object.assign(state, getDefaultState())
  }
}

export default {
  state,
  getters: {},
  actions,
  mutations
}

Vuex-Modulstatus wie ein Profi zurücksetzen

Vielen Dank an Taha Shashtari für die großartige Lösung.

Michael,

9

Aktualisieren Sie nach der Verwendung der folgenden Lösung ein wenig mehr

Es stellt sich also heraus, dass Sie, wenn Sie replaceState mit einem leeren Objekt ({}) verwenden, die Ziegelreaktivität beenden, da Ihre Statusrequisiten wegfallen. Sie müssen also im Grunde jede Eigenschaft im Zustand zurücksetzen und dann store.replaceState(resetStateObject) verwenden. Für das Speichern ohne Module würden Sie im Wesentlichen Folgendes tun:

let state = this.$store.state;
let newState = {};

Object.keys(state).forEach(key => {
  newState[key] = null; // or = initialState[key]
});

this.$store.replaceState(newState);

Update (von Kommentaren): Was ist, wenn nur ein einzelnes Modul zurückgesetzt/definiert werden muss und der Rest so bleibt, wie er war?

Wenn Sie nicht alle Module zurücksetzen möchten, können Sie einfach die benötigten Module zurücksetzen und den anderen Reset in seinem aktuellen Zustand belassen. 

Angenommen, Sie haben mehrere Module und möchten das Modul a nur in den Ausgangszustand zurücksetzen. Verwenden Sie dazu die Methode oben ^, die wir resetStateA nennen. Dann würden Sie den ursprünglichen Zustand klonen (der alle Module vor Zurücksetzen enthält). 

var currentState = deepClone(this.state)

dabei ist deepClone Ihre Methode der Tiefenklonierung ( lodash hat eine gute ). Dieser Klon hat den aktuellen Status von A vor dem Zurücksetzen. Also lasst uns das überschreiben

var newState = Object.assign(currentState, {
  a: resetStateA
});

und verwenden Sie diesen neuen Status mit replaceState, der den aktuellen Status aller Ihrer Module enthält, mit Ausnahme des Moduls a mit seinem Anfangsstatus:

this.$store.replaceState(newState);

Originallösung

Ich habe diese praktische Methode in Vuex.store gefunden. Sie können alle Zustände schnell und problemlos löschen, indem Sie replaceState wie folgt verwenden:

store.replaceState({})

Es funktioniert mit einem einzelnen Geschäft oder mit Modulen und erhält die Reaktivität all Ihrer Zustandseigenschaften. Siehe die Vuex api doc-Seite , und suche auf der Seite nach replaceState.

Für Module

Wenn Sie ein Geschäft durch Module ersetzen, müssen Sie für jedes Modul leere Statusobjekte hinzufügen. Wenn Sie beispielsweise die Module a und b haben, würden Sie Folgendes tun:

store.replaceState({
  a: {},
  b: {}
})
5
seebiscuit

Sie können einen Anfangsstatus deklarieren und ihn per Eigenschaft auf diese State-Eigenschaft zurücksetzen. Sie können nicht einfach state = initialState ausführen oder Sie verlieren die Reaktivität. 

So machen wir es in der Anwendung, an der ich gerade arbeite:

let initialState = {
    "token": null,
    "user": {}
}

const state = Vue.util.extend({}, initialState)

const mutations = {
    RESET_STATE(state, payload) {
       for (let f in state) {
        Vue.set(state, f, initialState[f])
       }
    }
}
4
For the Name

Wenn Sie state = {} ausführen, wird die Reaktivität der Eigenschaften aufgehoben, und die Mutationen der Getter werden plötzlich nicht mehr funktionieren.

sie können eine untergeordnete Eigenschaft haben wie:

state: {
  subProperty: {
    a: '',
    lot: '',
    of: '',
    properties: '',
    .
    .
    .
  }
}

Ein state_subProperty = {} sollte helfen, ohne die Reaktivität zu verlieren.

Sie sollten keinen zu großen Status haben, sie in verschiedene Module aufteilen und wie folgt in Ihren Vuex-Store importieren:

import Vue from 'vue'
import Vuex from 'vuex'
import authorization from './modules/authorization'
import profile from './modules/profile'

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: {
    authorization,
    profile
  }
})

jetzt in deinen individuellen Dateien:

// modules/authorization.js
import * as NameSpace from '../NameSpace'
import { someService } from '../../Services/something'

const state = {
  [NameSpace.AUTH_STATE]: {
    auth: {},
    error: null
  }
}

const getters = {
  [NameSpace.AUTH_GETTER]: state => {
    return state[NameSpace.AUTH_STATE]
  }
}

const mutations = {
  [NameSpace.AUTH_MUTATION]: (state, payload) => {
    state[NameSpace.AUTH_STATE] = payload
  },
}

const actions = {
  [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => {
    someService.login(payload.username, payload.password)
      .then((user) => {
        commit(NameSpace.AUTH_MUTATION, {auth: user, error: null})
      })
      .catch((error) => {
        commit(NameSpace.AUTH_MUTATION, {auth: [], error: error})
      })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

Wenn Sie den Status löschen möchten, können Sie einfach eine Mutation implementieren lassen:

state[NameSpace.AUTH_STATE] = {
  auth: {},
  error: null
}
3

Ich bin nicht sicher, was Sie verwenden, aber ich musste etwas Ähnliches tun. Wenn sich ein Benutzer abmeldet, möchte ich den gesamten Status der App löschen - also habe ich gerade window.reload. Vielleicht nicht genau das, wonach Sie gefragt haben, aber wenn Sie deshalb den Laden löschen möchten, vielleicht eine Alternative.

2
xenetics

router.go() oder this.$router.go() aufrufen

Dadurch wird die Seite aktualisiert und Ihr Status wird auf den Stand zurückgesetzt, als der Benutzer die App zum ersten Mal geladen hat.

1
Amol J

Basierend auf diesen 2 Antworten ( # 1# 2 ) habe ich einen funktionsfähigen Code erstellt.

Meine Struktur von Vuexs index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import { header } from './header'
import { media } from './media'

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [createPersistedState()],

  modules: {
    header,
    media
  }
})

export default store

Innerhalb jedes Moduls müssen wir alle Zustände in die getrennte var initialState verschieben und in der Mutation eine Funktion resetState definieren, wie unten für media.js:

const initialState = () => ({
  stateOne: 0,

  stateTwo: {
    isImportedSelected: false,
    isImportedIndeterminate: false,

    isImportedMaximized: false,
    isImportedSortedAsc: false,

    items: [],

  stateN: ...
  }
})

export const media = {
  namespaced: true,

  state: initialState, // <<---- Our States

  getters: {
  },

  actions: {
  },

  mutations: {
    resetState (state) {
      const initial = initialState()
      Object.keys(initial).forEach(key => { state[key] = initial[key] })
    },
  }

}

In der Vue-Komponente können wir es wie folgt verwenden:

<template>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    name: 'SomeName',

    data () {
      return {
        dataOne: '',
        dataTwo: 2
      }
    },

    computed: {
    },

    methods: {
      ...mapMutations('media', [ // <<---- define module
        'resetState' // <<---- define mutation
      ]),

      logout () {
        this.resetState() // <<---- use mutation
        // ... any code if you need to do something here
      }
    },

    mounted () {
    }
  } // End of 'default'

</script>

<style>
</style>
1
TitanFighter

Wenn Sie Ihren gesamten Status zurücksetzen möchten, können Sie die eingebaute replaceState -Methode verwenden.

In index.js festgelegter Status:

    const state = { user: '', token: '', products: [] /* etc. */ }
    const initialStateCopy = JSON.parse(JSON.stringify(state))

    export const store = new Vuex.Store({ state, /* getters, mutations, etc. */ })

    export function resetState() {
      store.replaceState(initialStateCopy)
    }

Dann importiere in deiner vue Komponente (oder irgendwo) resetState:

    import { resetState } from '@/store/index.js'

    // vue component usage, for example: logout
    {
      // ... data(), computed etc. omitted for brevity
      methods: {
        logout() { resetState() }
      }
    }
1
hitautodestruct

Ich habe oben gelesen und eine Lösung implementiert. könnte dir auch helfen !!

Alle Objekte gespeichert in Vue fungieren als beobachtbar. Wenn also Referenz eines Wertes geändert/mutiert ist, wird auch der Istwert geändert ausgelöst.

Also, um reset den Zustand der initialen Speichermodule muss als Wert kopiert werden.

Beim Abmelden eines Benutzers muss für jedes Modul der gleiche Wert vergeben werden als Kopie.

Dies kann folgendermaßen erreicht werden:

Schritt 1: Erstellen Sie eine Kopie Ihres ursprünglichen Moduls.

// store.ts

// Initial store with modules as an object
export const initialStoreModules = {
    user,
    recruitment,
};

export default new Vuex.Store({
    /**
     * Assign the modules to the store 
     * using lodash deepClone to avoid changing the initial store module values
     */
    modules: _.cloneDeep(initialStoreModules),
    mutations: {
        // reset default state modules by looping around the initialStoreModules
        [types.RESET_STATE](state: any) {
        _.forOwn(initialStoreModules, (value: IModule, key: string) => {
            state[key] = _.cloneDeep(value.state);
        });
        },
    }
});

Schritt 2: Rufen Sie die Aktion auf, um den Zustand in den Anfangszustand zu ändern.

// user_action.ts
const logout = ({ commit }: any) => {
    commit(types.LOGOUT_INIT);
    new UserProxy().logout().then((response: any) => {
      router.Push({
        name: 'login',
      });
      // reset the state
      commit(types.RESET_STATE);
    }).catch((err: any) => {
      commit(types.LOGOUT_FAIL, err);
    });
};
0
Mukundhan

Hier ist eine Lösung, die in meiner App funktioniert. Ich habe eine Datei mit dem Namen defaultState.js erstellt.

//defaultState.js
//the return value is the same as that in the state
const defaultState = () => {
    return {
       items: [],
       poles: {},
       ...
    }
}

export default defaultState

Und dann, wo Sie es verwenden möchten

//anywhere you want to use it
//for example in your mutations.js
//when you've gotten your store object do

import defaultState from '/path/to/defaultState.js'

let mutations = {
    ...,
    clearStore(state){
        Object.assign(state, defaultState())
    },
}

export default mutations

Dann in deinem store.js

import Vue from 'vue';
import Vuex from 'vuex';

import actions from './actions';
import getters from './getters';
import mutations from './mutations'; //import mutations
import state from './state';

Vue.use(Vuex);


export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
});

und das ist es

0
david oyinbo