VueX는 어떻게 되는 거예요?

요약 정보:

Vuex is a state management pattern + library for Vue. js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Vuex 4의 다음 버전으로, 정식 릴리즈에 앞서 마지막 단계를 완료하고 있습니다.이 버전은 Vue 3과 완전히 호환되지만 새로운 기능은 추가되지 않습니다.비록 Vuex는 강력한 해결 방안이자 많은 개발자들이 Vue에서 상태 관리를 하는 첫 번째 선택이지만 일부 개발자들은 더 많은 업무 흐름 문제가 해결되는 것을 보고 싶어 한다.
Vue3과 그composition API가 등장하면서 수공으로 만든 간단한 대체품을 찾고 있다.예를 들어 composition API와 provide/inject를 사용하여 공유 상태 저장소를 만드는 데 사용되는 비교적 간단하고 유연하며 건장한 모델을 보여 주었다.이 대체 방안은 코드와 무관한 모든 것이 부족하기 때문에 작은 응용 프로그램에서만 사용해야 한다. 지역사회 지원, 문서, 약속, 양호한 Nuxt 통합, 개발자 도구가 부족하기 때문이다.

상점 정의
Vuex 스토어를 사용하기 전에 하나를 정의해야 합니다.Vuex 4에서 스토어는 다음과 같이 정의됩니다.

import { createStore } from 'vuex'

export const counterStore = createStore({
  state: {
    count: 0
  },

  getters: {
    double (state) {
      return state.count * 2
    }
  },

  mutations: {
    increment (state) {
      state.count++
    }
  },

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

각 저장소는 네 가지 부분으로 나뉜다. state 데이터를 저장하고, getters 계산 상태를 제공하며, mutations 상태를 바꾸는 데 사용하고, actions는 저장소 외부에서 호출하는 방법으로 저장소와 관련된 모든 조작을 완성한다.통상적인 상황에서 동작은 이 예에서 보듯이 돌변했을 뿐이다.반대로 돌연변이가 동기화되어야 하거나 더 복잡하거나 여러 단계의 기능을 실현할 뿐이기 때문에 비동기적인 임무를 수행하는 데 사용된다.

import { defineStore } from 'vuex'

export const counterStore = defineStore({
  name: 'counter',

  state() {
    return { count: 0 }
  },

  getters: {
    double () {
      return this.count * 2
    }
  },

  actions: {
    increment () {
      this.count++
    }
  }
})

우선, 우리는 createStore로 대체defineStore를 사용한다.이런 차이는 무시할 수 있지만, 그것의 존재는 의미의 원인에서 비롯된 것이므로, 우리는 뒤에서 토론할 것이다.다음에 우리는 상점에 name을 제공해야 한다. 이것은 우리가 이전에 필요로 하지 않았던 것이다.과거에 모듈은 자신의 이름이 있었지만 모듈 자체가 제공한 것이 아니다.그것들은 부모 상점에 분배된 속성 이름만 추가할 뿐입니다.이제 모듈이 없습니다.반면 각 모듈은 별도의 저장소와 이름이 있을 것이다.
다음에 우리는 초기 상태로 설정하는 것이 아니라 state 초기 상태로 되돌아오는 함수를 만들어야 한다.이것은 구성 요소의 data 옵션과 유사합니다.우리가 작성한 방식getters은 우리가 Vuex4에서 작성한 방식과 매우 비슷하지만 state을 모든 Getter의 매개 변수로 사용하지 않고 this로 상태에 들어갈 수 있습니다.마찬가지로 actions대상도 걱정할 필요가 없다. 그들은 context로 모든 내용을 방문할 수 있다.마지막으로this.반면 돌연변이mutations와 결합했다.

가게를 열다
Vuex 4에서 상황은 Vuex 3과 다르지만, 나는 일을 통제하지 못하도록 v4만 볼 것이다.v4에서 actions 를 호출했을 때, 실례화했습니다.그런 다음 createStore 또는 애플리케이션에서 직접 사용할 수 있습니다.

import { createApp } from 'vue'
import App from './App.vue' // Your root component
import store from './store' // The store definition from earlier

const app = createApp(App)

app.use(store)
app.mount('#app')

// Now all your components can access it via `this.$store`
// Or you can use in composition components with `useStore()`

// -----------------------------------------------

// Or use directly... this is generally discouraged
import store from './store'

store.state.count // -> 0
store.commit('increment')
store.dispatch('increment')
store.getters.double // -> 4

이것은 Vuex 5가 v4보다 더 복잡한 점이다.모든 응용 프로그램은 현재 하나의 단독 Vuex 실례를 얻을 수 있다. 이것은 모든 응용 프로그램이 같은 상점의 단독 실례를 가지고 그들 사이에서 데이터를 공유할 필요가 없도록 확보한다.스토어 인스턴스를 응용 프로그램 간에 공유하려면 Vuex 인스턴스를 공유할 수 있습니다.

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue' // Your root component

const app = createApp(App)
const vuex = createVuex() // create instance of Vuex

app.use(vuex) // use the instance
app.mount('#app')

이제 모든 구성 요소가 Vuex 인스턴스에 액세스할 수 있습니다.스토리지 정의를 직접 지정하지 않고 사용할 어셈블리로 가져오고 Vuex 인스턴스를 사용하여 인스턴스화하고 등록합니다.

import { defineComponent } from 'vue'
import store from './store'

export default defineComponent({
  name: 'App',

  computed: {
    counter () {
      return this.$vuex.store(store)
    }
  }
})

호출app.use - Vuex 인스턴스에서 스토리지를 인스턴스화하고 등록합니다.그때부터 이 저장소에서 언제든지 $vuex.store 사용하면 다시 실례화된 저장소가 아니라 이미 실례화된 저장소로 돌아간다.$vuex.store에서 만든 Vuex 실례에서 store 방법을 직접 호출할 수 있습니다.
현재 상점에서 createVuex() 을 통해 이 구성 요소에 접근할 수 있습니다.어셈블리에 대해 composition API를 사용하는 경우 this.counter 대신 useStore를 사용할 수 있습니다.

import { defineComponent } from 'vue'
import { useStore } from 'vuex' // import useStore
import store from './store'

export default defineComponent({
  setup () {
    const counter = useStore(store)

    return { counter }
  }
})

상점을 이용하다
다음은 Vuex 4에서 스토어를 사용하는 경우입니다.

store.state.count            // Access State
store.getters.double         // Access Getters
store.commit('increment')    // Mutate State
store.dispatch('increment')  // Run Actions

this.$vuex.store, State, getters와 mutations는 모두 서로 다른 속성이나 방법을 통해 서로 다른 방식으로 처리된다.이것은 명확한 장점이 있다. 나는 앞에서 이 점을 칭찬했지만 이런 명확성은 우리에게 아무런 이익도 가져다 주지 않았다.
모든 컨텐츠, 상태, Getter 및 작업은 저장된 루트 디렉토리에서 직접 사용할 수 있으므로 사용이 간편하고 번거로울 필요가 없으며 실제로는 actions, mapState, mapGetters, mapActions 및 mapMutations 선택 API를 사용할 필요가 없습니다.

작곡점
오늘 우리가 논의할 Vuex 5의 마지막 부분은 조합성이다.Vuex 5에는 단일 스토리지에서 액세스할 수 있는 네임스페이스 모듈이 없습니다.이러한 모듈 중 하나는 완전히 독립된 저장소로 분할될 것이다.v4에서 명칭 공간은 전체 과정을 복잡하게 하기 때문에 commit와 dispatch 호출에서 명칭 공간을 사용하고 rootGetters와 rootState를 사용한 다음 Getter와state에 접근할 명칭 공간으로 단계적으로 들어가야 합니다.다음은 Vuex 5의 작동 방법입니다.

// store/greeter.js
import { defineStore } from 'vuex'

export default defineStore({
  name: 'greeter',
  state () {
    return { greeting: 'Hello' }
  }
})

// store/counter.js
import { defineStore } from 'vuex'
import greeterStore from './greeter' // Import the store you want to interact with

export default defineStore({
  name: 'counter',

  // Then `use` the store
  use () {
    return { greeter: greeterStore }
  },

  state () {
    return { count: 0 }
  },

  getters: {
    greetingCount () {
      return `${this.greeter.greeting} ${this.count}' // access it from this.greeter
    }
  }
})