0

完全错误return this.$store.state.counter：

类型“CreateComponentPublicInstance<{}, {}, {}, { counter(): any; 上不存在属性“$store” }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, ... 7 更多 ..., {}>'.Vetur(2339)

属性“$store”不存在于类型“CreateComponentPublicInstance<{}、{}、{}、{}、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、{}、{}、false、OptionTypesType<{}、... 4 个 ...，{}>，... 5 个 ...，{}>'.Vetur(2339)


这是一个干净的 Vue 项目（vue create v-vuex），具有以下 CLI 配置：

  • Vue 3.x（预览版）
  • 没有类风格的组件语法
  • 是的 Babel 和 TypeScript
  • ESLint + Prettier linter和格式化程序
  • 保存时棉绒
  • 专用配置文件

所有文件都是通过 Vue CLI 创建的具有默认项目结构的默认文件。

index.ts 文件：

import { createStore } from "vuex";

export default createStore({
  state: {
    counter: 8,
  },
  mutations: {},
  actions: {},
  modules: {},
});

应用程序.vue 文件：

<template>
  <h2>{{ counter }}</h2>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  computed: {
    counter() {
      return this.$store.state.counter;
    },
  },
});
</script>

main.ts 文件：

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

createApp(App).use(store).mount("#app");


我正在学习 Vue，我想访问 Vuex 存储状态属性。基本反例。

只有当我通过模板中的插值直接使用它时，我才能访问计数器状态，例如{{ $store.state.counter }}，但是一旦我想使用一个返回的计算属性，我就无法使用关键字this访问 $store 。

return this.$store.state.counter不工作


我的编码设置：

  • VSCode，最新版本
  • NPM 和 Vue CLI
  • 维特尔
  • ESLint
  • 更漂亮


我在不同的项目设置中做了同样的例子，例如“没有 TypeScript”和“使用 Class-Style 组件语法”，但在前一种情况下，我的 Vetur 不起作用所以它是不可接受的（不确定它是否会出错)，在后一种情况下，它可以工作，但我不熟悉语法，而且由于我没有经验，甚至考虑学习课堂风格来解决这个问题都是压倒性的。


编辑：有类似的问题，但没有一个与新的 Vue CLI 项目有关。

4

1 回答 1

0

尝试这个

export default createStore({
  state() {
    return : {
      counter: 8,
    }
  },
  mutations: {},
  actions: {},
  modules: {},
});

counter: function () {
  return this.$store.state.counter;
},

工作代码：https ://codesandbox.io/s/vue-3-ionic-vuex-forked-w571p?file=/src/App.vue

于 2021-03-21T00:52:38.323 回答