Vuex store state : 싱글샷에서 상태 값을 재설정하기 위한 변수와 함수를 혼합하는 방법

Vuex store state : 싱글샷에서 상태 값을 재설정하기 위한 변수와 함수를 혼합하는 방법

나는 가지고 있다Vuex Store어플리케이션 내의 일부 변경에 따라 변수를 리셋해야 하기 때문에 다음과 같은 것을 사용하고 있으며 모든 것이 예상대로 작동하고 있습니다.

const getDefaultState = () => {
    return {
        showModal: false,
        nodeCounter:0,
        nodeInfo: [],
    }
}

export const state = () => getDefaultState()

export const mutations = {
  resetState (state) {
    // Reset all state variables to its default value for next node
    Object.assign(state, getDefaultState())
  },
}

단, 새로운 요건에 따라 리셋을 하고 싶지 않습니다.nodeCounter인크리멘털한 가치를 가지길 바라지만reset다른 모든 값들이 있기 때문에 저는 다음과 같은 것을 하고 싶습니다.

const getDefaultState = () => {
    return {
        showModal: false,
        nodeInfo: [],
    }
}

export const state = () => {
    nodeCounter:0,
    getDefaultState()
}

그래서 나의 다른 모든 가치관은reset하지만nodeCounter응용 프로그램을 새로 고쳤을 때만 리셋됩니다.하지만 나는 이것을 이룰 수 없다.

누가 나한테 어떻게 리셋할 수 있는지 알려줄래?state일부 변수를 리셋하지 않을 수 있습니까?상태 변수를 하나씩 리셋하고 싶지 않기 때문에function몇 가지 답변에서 언급한 바와 같이 접근합니다.

상태를 디폴트로 설정한 후 node Counter(유지하려는 경우)의 상태를 저장한 후 설정합니다.다음과 같은 경우:

const getDefaultState = () => {
    return {
        showModal: false,
        nodeCounter:0,
        nodeInfo: [],
    }
}

export const state = () => getDefaultState()

export const mutations = {
  resetState (state) {
    // Reset all state variables to its default value for next node
    const tmpNodeCounter = state.nodeCounter;
    state = {...getDefaultState(),nodeCounter: tmpNodeCounter};
  },
}

변환이 있는 상태의 일부 값만 리셋하는 경우 모든 상태 변수를 이 값에 포함할 필요는 없습니다.resetState돌연변이매번 재설정해야 하는 변수에 대해 다른 개체를 정의할 수 있습니다.여기 내 Nuxt 스토어 파일이 있습니다.change.js:

const getDefaultState =  {
  showModal: false,
  nodeCounter:0,
  nodeInfo: [],
}

const alwaysReset = {
  showModal: false,
  nodeInfo: [],
}

export const state = () => (getDefaultState);

export const mutations = {
  resetState (state) {
    // Reset state variables that must be reset each time and not all state
    Object.assign(state, alwaysReset);
  },

  increment (state) {
    console.log(state.nodeCounter);
    state.nodeCounter++;
  },

  pushArr (state) {
    console.log(state.nodeInfo);
    state.nodeInfo.push("item");
  }
}

그alwaysReset오브젝트에는 매번 리셋할 변수만 포함됩니다.이 Nuxt 페이지에서 내 답변을 테스트하기 위해 다른 돌연변이가 생성되었습니다. 예:

<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-card
          class="pa-2"
          outlined
          tile
        >
          <div>this is a page</div>
          <v-btn @click = "changeState">click</v-btn>
          <v-btn @click = "incrementState">increment</v-btn>
          <v-btn @click = "arrayState">push</v-btn>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    methods: {
      changeState: function() {
        this.$store.commit('change/resetState');
      },

      incrementState: function() {
        this.$store.commit('change/increment');
      },

      arrayState: function() {
        this.$store.commit('change/pushArr');
      }
    }
  }
</script>

여기에 3개의 버튼을 만들었습니다.그 중 하나가 지정된 변수를 리셋합니다.또 다른 하나는,nodeCounter리셋해도 이 상태가 변하지 않는 것을 확인합니다.마지막으로 세 번째는 아이템을 에 푸시한다.nodeInfo이 상태가 매번 리셋되는 것을 확인하려면 variable 상태가 리셋되는 것을 확인합니다.

언급URL : https://stackoverflow.com/questions/70006396/vuex-store-state-how-to-mix-the-function-with-variables-for-reseting-state-val