如何使用 Vuex 命名空間模塊和 Vue 組合 API 獲得多個操作和 state？

Question

使用 Vue 選項 API 我得到我的動作和 state 通過執行以下操作：

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

我的問題是如何使用 Vuex 和 Vue 組合 API 獲得多個命名空間操作和 state？ 現在我有一個名為 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"]);
}

任何幫助表示贊賞:)

Answer 1

這是一種方法：

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,
  }
});