Vue3 组件使用来自 vuex 状态的 v-if答案

【问题标题】：Vue3 component using v-if from vuex stateVue3 组件使用来自 vuex 状态的 v-if
【发布时间】：2021-07-27 23:00:58
【问题描述】：

我可以显示的代码有限，但我正在尝试使用基于 vuex 存储中的值的 V-If 语句。

我们正在使用组件 API 和 typescript。

DataStore.ts 的部分代码：

export const store = createStore<state>({
   state: {
     errorOrderPending: false
   },
   mutations: {
     setErrorOrderPending(state, newVale: boolean) {
       state.errorOrderPending = newVale;
     }
   }
});

export function useStore() {
   return baseUseStore(key);
}

In the component, I'm importing the store and useStore.
<template>
  <div class="modal" >
    <p>Show modal</p>
  </div>
</template>

我尝试过：

<div v-if="$store.state.errorOrderPending" class="modal" >

但它不起作用。

我希望我可以分享代码，但我不能，但这基本上是正在发生的事情。

谢谢

【问题讨论】：

即使您无法发布完整代码，您也应该能够生成一个最小示例来重现您的问题。
你使用的是组合 API 还是类组件？
组合 API 和 TypeScript。我被招募来参与这个项目，因为它已经建成了很多。任何帮助将不胜感激。您可以为两者提供解决方案以防万一吗？谢谢。

标签： vue.js vuex vuejs3

【解决方案1】：

使用模块将商店导入到我的组件中，但我必须从组件的 API 设置中导出商店。在我这样做之后， state.store.errorOrderPending 起作用了。

【讨论】：