Typescript Vuex存储和类型脚本

我很好奇我选择的访问vuex商店的方式，以及它是否会导致问题

我有一个vuex项目，我正在使用VS Code，当我通过this.$store访问商店时，它会显示大多数物品的any类型

e、 g

但是，如果我导入存储，它将显示所有内容的正确键入

e、 g

---

我已经测试并确认该存储按照预期进行了修改，并且可以使用

this.$store

从其他页面获得任何更改的值。以这种方式访问存储似乎没有什么坏处，它还有一个额外的好处，那就是使存储易于访问我可能想要使用的任何箭头函数。我遗漏了什么吗？

简单的回答是，是的，这很有效。导入的

store

实例与组件中的

this.$store

实例相同

用法不同。组件的视图部分只查看组件范围内的变量，而不查看全局变量。因此，在第一种情况下，您可以将components视图部件中的bar称为

$store.state.bar

。在第二种情况下，您必须为bar创建一个getter，就像您在示例中所做的那样

第一种方法更为传统，因此推荐使用

现在，为什么类型推断在IDE中不起作用是另一个问题。这可能有多种原因：

• 最明显的是：VS代码中的类型推断，或者更确切地说是Vetur插件，我认为您使用的，是不完美的。你可能想试试WebStorm，在我看来，它在这方面要好一些
• 推断

  条的类型有多难？您是否显式地声明了类型？您是否为门店状态定义了接口

要充分利用TypeScript，请尽可能明确地使用您的类型。例如，此Vuex商店很难猜测酒吧的类型：

export default new Vuex.Store({
  state: () => ({
    bar: null
  }),
  mutations: {
    setBar: function(state, bar) {
      state.bar = bar;
    }
  }
})

另一方面，这一点非常明确：

interface State {
  bar: Bar | null;
}

export default new Vuex.Store<State>({
  state: (): State => ({
    bar: null
  }),
  mutations: {
    setBar: function(state: State, bar: Bar) {
      state.bar = bar;
    }
  }
})

接口状态{
bar:bar |空；
}
导出默认的新Vuex.Store({
状态：（）：状态=>({
条：空
}),
突变：{
立根杆：功能（状态：状态，条形：条形）{
state.bar=bar；
}
}
})

您可以在此处阅读有关正确键入Vuex存储的更多信息：

export default new Vuex.Store({
  state: () => ({
    bar: null
  }),
  mutations: {
    setBar: function(state, bar) {
      state.bar = bar;
    }
  }
})

interface State {
  bar: Bar | null;
}

export default new Vuex.Store<State>({
  state: (): State => ({
    bar: null
  }),
  mutations: {
    setBar: function(state: State, bar: Bar) {
      state.bar = bar;
    }
  }
})