vuex 스토어에서 상태를 지우려면 어떻게 해야 합니까?

vuex 스토어에서 상태를 지우려면 어떻게 해야 합니까?

vuex 스토어에서의 내 상태는 엄청나다.

수동으로 모든 데이터를 null로 설정하지 않고 한 번에 모든 데이터를 리셋할 수 있는 방법이 있습니까?

나는 방금 나에게 맞는 훌륭한 해결책을 찾았다.

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) {
    // Merge rather than replace so we don't lose observers
    // https://github.com/vuejs/vuex/issues/1118
    Object.assign(state, getDefaultState())
  }
}

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

훌륭한 솔루션을 제공해 주신 Taha Shashtari씨께 감사드립니다.

마이클.

아래 솔루션을 좀 더 사용한 후 업데이트하십시오.

이렇게 하면 '아까운'을 쓰면 '아까운'이 되는 예요.replaceState 오브젝트빈 오브젝트)를 사용하여{}국가 기구가 사라지기 때문에 당신은 결국 반응성을 억제하게 됩니다., 실제로는 , 「Reset」을 사용할 가 있습니다.store.replaceState(resetStateObject)모듈이 없는 스토어에서는 기본적으로 다음과 같은 작업을 수행합니다.

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

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

this.$store.replaceState(newState);

업데이트(댓글에서):1개의 모듈만 리셋/정의하고 나머지는 그대로 유지하면 어떻게 됩니까?

모든 모듈을 리셋하지 않을 경우 필요한 모듈을 리셋하고 다른 모듈을 현재 상태로 리셋하면 됩니다.

를 들어,합니다.a처음 알 수 resetStateA그런 다음 원래 상태(리셋 전에 모든 모듈을 포함)를 복제합니다.

var currentState = deepClone(this.state)

서 ''는deepClone고객이 선택한 딥 클로닝 방법(로더쉬가 좋은 방법을 사용)입니다.이 복제본은 재설정 전 현재 A 상태입니다.그럼 덮어씁시다.

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

를 「New State」와 함께 사용합니다.replaceStatea'이것'은 다음과 같습니다.

this.$store.replaceState(newState);

---

오리지널 솔루션

나는 이 편리한 방법을 에서 찾았다.Vuex.store. 모든 를 쉽고 할 수 replaceState 이렇게요.

store.replaceState({})

단일 저장소 또는 모듈과 함께 작동하며 모든 상태 속성의 반응성을 유지합니다.Vuex api 문서 페이지 및 페이지에서 찾기:replaceState.

모듈의 경우

저장소를 모듈로 교체하는 경우 각 모듈에 빈 상태 개체를 포함해야 합니다. 모듈이 a ★★★★★★★★★★★★★★★★★」b하다

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

초기 상태를 선언하고 속성별로 해당 상태 속성으로 재설정할 수 있습니다.상태 = initialState만 수행하거나 반응성을 잃을 수 없습니다.

현재 사용하고 있는 어플리케이션에서는, 다음과 같이 작업을 실시합니다.

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])
       }
    }
}

어떤 용도인지 모르겠지만 비슷한 일을 해야 했어요.할 의 전체 용용가 of of of of of of when when when when when when when when when when when when when when when when when when when when when when when when when when when when.window.reload당신이 요구한 것은 아닐지도 모르지만, 만약 이것이 당신이 가게를 비우고 싶은 이유라면, 다른 방법이 될 수도 있습니다.

상태 = {}을(를) 수행하면 속성의 반응성이 제거되고 getters 돌연변이가 갑자기 작동을 중지합니다.

다음과 같은 서브패킷을 가질 수 있습니다.

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

state.subProperty = {}을(를) 수행하면 반응성을 잃지 않고 도움이 됩니다.

상태가 너무 크면 안 됩니다.이러한 모듈을 다른 모듈로 분할하여 vuex 스토어로 Import합니다.

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
  }
})

이제 개별 파일에 저장:

// 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
}

스테이트를 클리어 하는 경우는, 변환 실장만 하면 됩니다.

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

여기 제 앱에서 사용할 수 있는 솔루션이 있습니다.defaultState.js라는 이름의 파일을 만들었습니다.

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

export default defaultState

그런 다음 어디에 사용하고 싶은지

//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

그럼 당신의 가게에서.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,
});

그리고 이것이 마지막입니다.

전체 상태를 재설정하려면 기본 제공 방법을 사용할 수 있습니다.

index.js로 설정된 상태:

    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)
    }

그런 다음 vue 컴포넌트(또는 임의의 장소)에서 ImportresetState:

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

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

이 2개의 답변(#1 #2)을 바탕으로 동작 가능한 코드를 작성했습니다.

Vuex의 구조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

각 모듈 내에서 모든 상태를 분리된 변수로 이동해야 합니다.initialState그리고 돌연변이는 함수를 정의한다.resetState이하와 같이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] })
    },
  }

}

Vue 컴포넌트에서는 다음과 같이 사용할 수 있습니다.

<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>

불러router.go()또는this.$router.go()

그러면 페이지가 새로 고쳐지고 사용자가 처음 앱을 로드했을 때의 상태로 재설정됩니다.

저는 위의 내용을 읽고 해결책을 구현했습니다.당신에게도 도움이 될 수 있습니다!!

Vue에 저장된 모든 개체는 관찰 가능한 개체로 작동합니다.따라서 값의 기준이 변경/변환되면 실제 값도 변경됩니다.

따라서 상태를 리셋하려면 초기 저장 모듈을 값으로 복사해야 합니다.

사용자 로그아웃 시 각 모듈에 동일한 값을 복사본으로 할당해야 합니다.

이것은 다음과 같이 달성할 수 있습니다.

순서 1: 초기 모듈의 복사본을 만듭니다.

// 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);
        });
        },
    }
});

스텝 2: 액션을 호출하여 상태를 초기 상태로 변환합니다.

// 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);
    });
};

vuex-extensions라는 작은 패키지로 쉽게 해결할 수 있습니다.

Code Sandbox의 예를 참조하십시오.

Vuex를 만들고 있습니다.가게

import Vuex from 'vuex'
import { createStore } from 'vuex-extensions'

export default createStore(Vuex.Store, {
  plugins: []
  modules: {}
})

Store resets to initial State

// Vue Component
this.$store.reset()

// Vuex action
modules: {
  sub: {
    actions: {
      logout() {
        this.reset()
      }
    }
  }
}

당신은 이걸 할 수 있다.

index.displaces를 표시합니다.

...

const store = new Vuex.Store({
    modules: {
       ...
    }
})

store.initialState = clone(store.state)

store.resetState = () => {
    store.replaceState(store.initialState)
}

export default store

기타 장소

this.$store.resetState()

function initialState () {
  return { /* .. initial state ... */ }
}

export default {
  state: initialState,

  mutations: {
    reset (state) {
      // acquire initial state
      const s = initialState()
      Object.keys(s).forEach(key => {
        state[key] = s[key]
      })
    }
  }
}

이것은 공식적인 권장 사항입니다.

전체 vuex 스토어 사용을 지우는 경우:

sessionStorage.clear();

언급URL : https://stackoverflow.com/questions/42295340/how-to-clear-state-in-vuex-store