Vue Composition API를 통해 공식 발표된 Vuex4 상태 관리

며칠 전에는 Vue Composion API에 완전히 대응하는 Vuex가 공식 발표됐다.이 문서는 가져오기 방법과 Vue Composition API 사용 방법을 중심으로 요약할 것입니다.
https://github.com/vuejs/vuex/releases/tag/v4.0.0

설치하다.

현재(2020년 2/3)에서 Vuex를 기존 저장소로 가져오려면

# npm の場合
npm install vuex@next --save 

# yarn の場合
yarn add vuex@next --save

에 설치합니다.
이어서 /store/index.ts

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

.main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import {store} from "./store";

const app = createApp(App)
  .use(store)
  .use(router)

router.isReady().then(() => {
  app.mount('#app');
});

이렇게 하면 Vuex의 초기 설정이 완성된다.

Vue Composition API에서 Vuex를 호출합니다.

Vuex는 Vue3에서 정식으로 가져온 Vue Composition API에서 실제로 사용됩니다.setup()내 사용할 수 없음this.$store.대신 useStore() 글로벌 State를 component 내에서 처리합니다.
Vuex에서

store, Getter 사용 시 →computed()

mutation, action 사용 시→이용methods

// 省略

<script>
import {computed} from "vue"
import {useStore} from "vuex"

export default {
    setup(){
        const store = useStore()
        return {
            // state を呼び出す場合
            count: computed(()=>store.state.count),

            // getters を呼び出す場合
            double: coumputed(()=>store.getters.double),
            
            // mutation を呼び出す場合
            increment:() =>store.commit("increment"),

            // action を呼び出す場合
            asyncIncrement:() => store.dispatch("asyncIncrement")
        }
    }
}
</script>

위에서 말한 바와 같이 setup() 내에 Vuex를 사용한다.

TypeScript Support

Vue 3.x까지 Vuex의 유형을 정의하는 데 있어 공식 제공GetterTree, ActionTree, MutationTree 등이다.
그렇지만

Getter의 반환값의 유형이 any

로 변경됨

Action과 Mutation의payload는any

로 바뀌었다.

Editor 자체 TypeScript의 유형 보완이 원활하지 않음

등의 문제로 인해 Type Script와의 호환성이 좋지 않습니다.
Vue4.0부터 InjectionKey를 사용하여 유형을 정의합니다.
방금 /store/index.ts에서 유형을 정의합니다.

import {InjectionKey} from "vue"
import { createStore, Store, useStore as baseUseStore } from 'vuex'

export interface GlobalState{
    count:number
}

export const StateKey: InjectionKey<Store<GlobalState>> = Symbol()

export const store = createStore({
  state () {
    return {
      count: 0
    }
  }
})

// useState を呼び出す度、 StateKey で型を定義するのを避けるために、ここであらかじめ定義する
export function useStore(){
    return baseUseStore(StateKey)
}

이상으로 Component 내에서useStore() 중 부여형 물건을 사용할 수 있습니다.

인용하다

공식 문서