weixin_39835925
2021-01-12 12:07 阅读 2

How to use `...mapGetters` with class components? Typescript errors

When I use mapGetters for computed properties in a class component, I get errors such that "Property '_____' does not exist` for all computed properties using mapGetters. Not sure if this is a typescript/ts-loader issue.

screen shot 2017-06-24 at 3 36 34 pm

该提问来源于开源项目:vuejs/vue-class-component

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

7条回答 默认 最新

  • weixin_39931390 weixin_39931390 2021-01-12 12:07

    You can declare the properties in the class or use a mapper like vuex-class.

    js
    ({
      computed: mapGetters(['foo'])
    })
    class App extends Vue {
      foo: string
    }
    
    点赞 评论 复制链接分享
  • weixin_39541693 weixin_39541693 2021-01-12 12:07

    Hi, given solution also generates error for me. Any tips most appreciated, thanks.

    screen shot 2018-12-12 at 15 29 05

    below are the deps from package json if it makes any sense,

    
    ...
      "dependencies": {
        "d3": "^5.7.0",
        "lodash": "^4.17.11",
        "register-service-worker": "^1.5.2",
        "vue": "^2.5.17",
        "vue-class-component": "^6.0.0",
        "vue-property-decorator": "^7.0.0",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1",
        "whatwg-fetch": "^3.0.0"
      },
      "devDependencies": {
        "/d3": "^5.0.1",
        "/jest": "^23.1.4",
        "/lodash": "^4.14.118",
        "/cli-plugin-babel": "^3.1.1",
        "/cli-plugin-pwa": "^3.1.1",
        "/cli-plugin-typescript": "^3.1.1",
        "/cli-plugin-unit-jest": "^3.1.1",
        "/cli-service": "^3.1.1",
        "/test-utils": "^1.0.0-beta.20",
        "babel-core": "7.0.0-bridge.0",
        "ts-jest": "^23.0.0",
        "typescript": "2.9.2",
        "vue-template-compiler": "^2.5.17"
      }
    }
    
    点赞 评论 复制链接分享
  • weixin_39628247 weixin_39628247 2021-01-12 12:07

    I also have been trying to figure out a way to remove that error, but have been unsuccessful. The only way that I have been able to suppress the error is by casting this to type any. This just feels wrong and removes a lot of the benefits of using Typescript in the first place.

     ts
    ({
      computed: {
        ...mapGetters('ChartModule', {
          charts: 'getCharts'
        })
      }
    })
    export default class ChartCompoment extends Vue {
       created() {
         console.log((this as any).charts)
       }
    }
    

    The other option that I have considered is using ,, etc. decorators in the component, but that requires one decorator for each mapped function. This looks clunky and is far less readable when you start to have many of these decorators in one component.

    Conclusion: I just want to be able to reference map[Getters/Mutations/State] in a class component using this.

    点赞 评论 复制链接分享
  • weixin_39887846 weixin_39887846 2021-01-12 12:07

    The key point is that when using TypeScript, you need to define properties not only for JS, runtime environment, but also for TS, static typing environment.

    Such mapXxx helpers works only in runtime, so, in order to achieve this issue, please write each properties’ or methods’ type definitions.

    ts
    ({
      computed: {
        ...mapGetters('ChartModule', {
          charts: 'getChars' // 
    点赞 评论 复制链接分享
  • weixin_39867662 weixin_39867662 2021-01-12 12:07

    I tried both what and suggested but I am still kinda confused

    getters.ts

    
    export const GET_POSTS = 'GET_POSTS'
    

    posts.module

    
    import {GET_POSTS} from '../types/getters'
    ...
      get [GET_POSTS]() {
        return this.posts || [];
      }
    

    PostsList.vue

    
    ({
      components: { PostListItem },
      computed: mapGetters(["GET_POSTS"]) // what local prop does this map to or how do I access it?
    })
    export default class PostsList extends Vue {
      name = "PostsList";
      posts = [];
    
      /**
       * Get posts
       */
      async mounted() {
       console.log(this.GET_POSTS); // ERROR: Property 'GET_POSTS' does not exist on type 'PostsList'.
      }
    

    essentially, I'm trying to do:

    
    ...mapGetters({
       posts: GET_POSTS
    })
    
    console.log(this.posts)
    
    点赞 评论 复制链接分享
  • weixin_39851048 weixin_39851048 2021-01-12 12:07

    any new progress here?

    it seems mapGetters doesnot match class vue with well ts surport

    点赞 评论 复制链接分享
  • weixin_39859954 weixin_39859954 2021-01-12 12:07

    I think a MapGetter class property decorator would be just the thing here; something like

    
    ('Module/something') something: sometype;
    
    点赞 评论 复制链接分享

相关推荐