Vue3 vuex

vuex in Vue3에서 문법

namespaced : true

• state는 기존대로 state.moduleName.stateName으로
• getters는 computed(() => store.getters["moduleName/getterName"])으로
• mutation은 store.commit("moduleName/mutationName", params)으로
• action은 store.dispatch("moduleName/actionName", params)으로

 

composition api를 통해 vuex를 대체할 수 있는가?

(proviedr - inject 사용) -> vuex사용하느 게 낫다.

vue Devtools에 의해 데이터가 어떤 함수와 컴포넌트에 의해 변경되는지 추적가능하기 때문에.

 

1. store 정의

import { createStore } from "vuex";

export default createStore({
  state: {
    count: 10
  },
  getters: {
    time2(state) {
      return state.count * 2;
    }
  },
  mutations: {
    setCounter(state, value) {
      state.count = value;
    }
  }
});

2. useStore 훅을 사용해서 store에 접근하는 방법

<template>
  <div>
    <h1>This is an about page</h1>
    {{ count }}
    {{ test.times2 }}
    <button @click="increase">증가</button>
  </div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);
    const test = computed(() => store.getters);
    const increase = () => store.commit("setCounter", count.value + 1);

    return { counter, increase, test };
  }
};
</script>

store를 여러 module로 분리하는 방법

아래 링크 예시 참조

 

예시1)

https://kyounghwan01.github.io/Vue/vue3/composition-api/#%EB%B0%98%EC%9D%91%ED%98%95-data-%EB%A7%8C%EB%93%A4%EA%B8%B0

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

 

예시2)

https://velog.io/@0seo8/Vue3-VuexStore-%EA%B5%AC%EC%84%B1

[Vue3] Vuex(Store) 구성

 

vuex-persistedstate - 새로고침시 상태 초기화 방지

 

https://kyounghwan01.github.io/blog/Vue/vuex/vuex-persistedstate/

vuex 새로고침시 상태 초기화 방지