Pinia: 함수/설정 구문으로 생성된 스토어를 재설정하는 방법

피니아란?

Pinia는 Vue 3용 상태 관리 솔루션입니다.
"아, 다른 도구?"라고 생각한다면 사실 Pinia는 Vuex 4의 다음 버전으로 생각할 수 있습니다. 또는 Evan이 말했듯이:






에반 유


@youyuxi






Pinia는 사실상 Vuex 5입니다! 이 시점에서 그것은 실제로 이름/브랜딩 문제입니다.


오전 08:49 - 2021년 11월 24일









Pinia는 Vuex와 많은 유사점을 공유하지만 더 간단하고 유형이 안전하며 확장 가능합니다!

아직 시도하지 않았다면 체크아웃the docs하여 시작하세요!

개체 및 기능 저장소

Pinia로 상점을 만드는 방법에는 두 가지가 있습니다.

개체 구문:

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++
    },
  }
})

함수 구문:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('main', () => {
  const counter = ref(0)
  const doubleCounter = computed(() => counter.value * 2)

  function increment() {
    counter.value++
  }

  return {
   counter,
   doubleCounter,
   increment
  }
})

객체 구문은 Vuex와 매우 유사합니다. 함수 구문은 반응성을 수동으로 정의하는 구성 요소setup() 메서드와 유사합니다.

개체 구문으로 저장소를 재설정하는 방법

개체 구문을 사용하는 경우 기본 제공$reset 메서드를 호출하기만 하면 됩니다.

<script setup>
import { useStore } from './useStore'

const store = useStore()

store.$reset // 👈

</script>

그러나 함수 구문을 사용하면 기본 제공$reset 메서드에서 오류가 발생합니다.

🍍: Store "main" is build using the setup syntax and does not implement $reset().

함수 구문으로 저장소를 재설정하는 방법

$reset 메서드가 Function 구문과 함께 작동하도록 하기 위해 Pinia 플러그인을 만들 것입니다. ✨

재설정-store.js

import cloneDeep from 'lodash.clonedeep'

export default function resetStore({ store }) {
  const initialState = cloneDeep(store.$state)
  store.$reset = () => store.$patch(cloneDeep(initialState))
}

여기에서 lodash.clonedeep을 사용하여 저장소의 초기 상태를 딥 복사하고 상태를 초기 값으로 설정하는 $reset 함수를 추가합니다. 복사본 자체에 대한 참조를 제거하려면 상태를 다시 딥 복사하는 것이 중요합니다.
store.$patch를 사용하여 여러 변경 사항을 동시에 적용합니다. Read more on the docs .

그런 다음 main.js 또는 Pinia를 초기화하는 모든 곳에서:

// ...
import { resetStore } from './reset-store'

//...
const pinia = createPinia()
pinia.use(resetStore)

app.use(pinia)

//...

데모here on Stackblitz를 보거나 다음을 삽입합니다.



Learn more about Pinia plugins

결론

대박! 이제 객체 구문을 사용하든 함수 구문을 사용하든 관계없이 $reset 메서드가 작동합니다! 🥳🥳

his answer on StackOverflow 에 대해 @tony19에서 최고의 Vue 개발자에게 감사하고 싶습니다.