How to register globally with typescript ?

[WhiteBookmark]

I am unable to use store.get('x-state') or store.set('foo', fooData) while my all files are in typescript. I did register globally using

window.store = store;

And in my shims-vue.d.ts

interface Window{
  store: any,
}

But upon running the code I receive:

Cannot find name 'store'

So how to use store.set and get ? I can use @get, @sync etc by manually importing them in .vue files but not anything else.

[WhiteBookmark]

Currently I am using following method to suppress errors I am getting from tslint.

In my *.d.ts file:

declare var store: any;

interface Window {
    store: any;
}

And in main.ts:

// Make sure you import the store first and then router
import store from '@/scripts/store';
import router from '@/scripts/router';
window.store = store;

It works now but I am sacrificing intellisense and typescript features which isn't good. I really need a solution for this problem.

[davestewart]

Hey, sorry for leaving this so long.

The reason was twofold; 1) I don't do enough strict TS to worry about this, and 2) I had no idea how to fix it!

Anyway, I'm working on some related stuff and I'm wondering if I might have come up with a solution.

It's essentially to extend Vuex.Store, add my own methods, then you create stores using the Pathify extended version:

import { Store as VuexStore } from 'vuex'
import pathify from '../plugin/pathify'

export default class Store extends VuexStore {
  constructor (props) {
    if (!props.plugins) {
      props.plugins = []
    }
    if (!props.plugins.includes(pathify.plugin)) {
      props.plugins.unshift(pathify.plugin)
    }
    super(props)
  }

  // will be "filled in" when the plugin runs
  set (path, value) { }
  get (path, ...args) { }
  copy (path, ...args) { }
}

This is working nicely in tests, and Webstorm, so I hoping TS would play ball:

It also has the benefit of not needing to import and include the plugin every time you make a new store (i.e. individual tests).

What do you think?

Could there be situations where the Pathify store would be rejected?

[davestewart]

Hey @axwalker - what do you think of this?

Think it would work, and work with tests (it appears to be!)

[axwalker]

I haven't used TS for a couple of years since my previous job so my knowledge is a little bit rusty!

I'll have a proper look at the weekend, but one thing to note for now is: I'm not sure how this would work with something like Nuxt where you don't get to instantiate the store yourself.

[davestewart]

Yeah, bloody Nuxt. It's this library's nemesis!

PS. Are you going to the Vue meetup tonight?

[ChrisKader]

Any updates to this?

[reynoldsdj]

I thought that I'd mention that I ran into this as well, and I am subbing for any updates. 😉

[davestewart]

Sorry everyone, my TS-fu isn't as good as I would like!

@kevinmarrec - is this possible?

Some background: I monkey-patch the store instance in the install() function, by adding 3 methods, set, get and copy.

Also realised after reviewing the thread that there are some Nuxt-related comments as well, so would love to get your input 😁

[kevinmarrec]

{
  "compilerOptions": {
    "types": [
      "vuex-pathify"
    ]
  }
}

should fix the undefined set/get methods TS errors.

[davestewart]

@kevinmarrec - thanks so much!

As soon as I have a moment, I will test that out. Most likely on the demo project

:D

[Glandos]

{
  "compilerOptions": {
    "types": [
      "vuex-pathify"
    ]
  }
}

should fix the undefined set/get methods TS errors.

Should this be integrated into pathify? Or in every project's tsconfig.json. I tried the latter, but my declaration of this.$store in a Vue component still misses methods.

[scbj]

{
  "compilerOptions": {
    "types": [
      "vuex-pathify"
    ]
  }
}

should fix the undefined set/get methods TS errors.

It's should be

{
  "compilerOptions": {
    "types": [
      "vuex-pathify/types/vuex"
    ]
  }
}

@Glandos And yes, you have to put that in each project's tsconfig.json

[davestewart]

Hey @scbj, thanks for this.

Also saw this recently; haven't yet looked into it properly for Pathify, but will do:

https://stackoverflow.com/questions/53798574/how-to-access-vue-prototype-property-from-typescript-component