Vuex 4 및 Vue 3에서 'mapActions' 또는 'mapGetters'를 사용합니다.

Vuex 4 및 Vue 3에서 'mapActions' 또는 'mapGetters'를 사용합니다.

누구나 사용할 수 있다mapState또는mapGetters와 함께Vue 3에서setupfunction ?스토어를 사용할 수 있다는 것을 알고 있습니다.useStore훅으로 이 훅으로 모든 스토어를 Import 합니다.mapState또는mapGetters특정할 수 있습니다.module:

// ...

computed: {
   ...mapGetters('myModule', [
      'myStateVariable'
   ]
) 

//...

제가 알기로는 납작해서 못 쓰실 것 같아요myModule/myStateVariable,그렇지만myStateVariable작동해야 합니다.

이는 Vuex가 RC 릴리스에 따라 변경될 수 있지만 현재로선 동일한 getter를 두 번 사용하려고 하면 이 오류가 발생합니다.

아마도 다음과 같습니다.

import { computed }  from 'vue';
import { useStore } from 'vuex';

const module = 'myModule';

export default {
    setup() {
        const store = useStore();

        return {
            // getter
            one: computed(() => store.getters[`${module}/myStateVariable`],

            // state
            two: computed(() => store.state[module].myStateVariable,
        };
    },
};

vue 3 및 vuex 4에서는 다음과 같이 할 수 있었습니다.아래에 스토어가 있다고 가정해 주세요.

우리의 일반 매장 색인(아래쪽에 있는 것)은 다음과 같습니다.

 import { createStore,     createLogger   } from 'vuex';
 import module1 from '@/store/module1';
 import module2 from '@/store/module2';


 export default createStore({

 modules: {
    module1: module1,
    module2: module2,
 },
  plugins: process.env.NODE_ENV !== 'production'
  ? [createLogger()]
  : []
})

각 모듈에는 다음과 같은 인덱스가 있습니다.

import * as getters from './getters'
import * as actions from './actions'
import mutations from './mutations'


const state = {
  postId: 10111,
}

export default {
  namespaced: true,

  state,
  getters,
  actions,
  mutations,
  
}

각 모듈의 getter는 다음과 같습니다.

export const getPostId = state => {
   return state.postId 
}

마지막으로 컴포넌트에서 다음과 같이 getter에 접근할 수 있습니다.

<template>
 <div>
   <div class="major_container">
     <p>{{ postIdFromModule1 }}</p>
     <p>{{ postIdFromModule2 }}</p>
  </div>
</div>
</template>
<script> 
import { computed } from "vue";
import { useStore } from "vuex";

export default {
 setup() {
   const store = useStore();

   const postIdFromModule1 = computed(() => store.getters["module1/getPostId"]);
   const postIdFromModule2 = computed(() => store.getters["module2/getPostId"]);

   return {
     postIdFromModule1,
     postIdFromModule2,
   };
  },
};
</script>

좋습니다. 이제 모듈 이름 지정 기능을 사용할 수 있습니다.

가장 좋은 사용방법mapActionsvue3 스타일의 SFC는mapActions에서setup()함수의return

import { mapActions } from "vuex"
setup() {
  return {
    ...mapActions("myModule", ["doSomething"])
  }
}

언급URL : https://stackoverflow.com/questions/63216740/use-mapactions-or-mapgetters-with-vuex-4-and-vue-3