Как получить несколько действий и состояний с модулями с пространством имен Vuex и Vue Composition API?

С помощью Vue Options API я получаю свои действия и состояние, выполняя:

  computed: {
    ...mapState("myStore", ["myState", "myOtherState"]),
  },
  methods: {
    ...mapActions("myStore", ["myAction", "myOtherAction"]),
  }

Мой вопрос: как получить несколько действий и состояний с пространством имен с помощью Vuex и Vue Composition API? Прямо сейчас у меня есть оболочка под названием useStoreModule.js, которая выглядит так:

import { createNamespacedHelpers } from "vuex-composition-helpers/dist";

export default function () {
  function getState(module, name) {
    const { useState } = createNamespacedHelpers(module);
    return useState([name]);
  }
  function getAction(module, name) {
    const { useActions } = createNamespacedHelpers(module);
    return useActions([name]);
  }
  return {
    getState,
    getAction,
  };
}

и получить состояние / действия, выполнив следующие действия:

setup() {
    const { getState } = useStoreModule();
    const { myState } = getState("myStore", "myState");
}

Итак, как мне написать обертку для этого:

setup() {
    const { getState } = useStoreModule();
    const { myState, myOtherState, myOtherOtherState } = getState("myStore", ["myState", "myOtherState", "myOtherOtherState"]);
}

Любая помощь приветствуется :)


javascript vue.js vuex vue-composition-api
person MikeS    schedule 20.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот способ сделать это:

component.vue

  import { getCurrentInstance } from 'vue';

  setup() {
    const _instance = getCurrentInstance();
    const { $store } = _instance.appContext.app.config.globalProperties;
  },

createStore

"use strict";
import { createStore } from 'vuex';

// Stores
import moduleA from '@/store/moduleA.js';
import moduleB from '@/store/moduleB.js';

export const store = createStore({
  strict: true,
  modules: {
    moduleA,
    moduleB,
  }
});
person RonaldT    schedule 20.04.2021