newStore and Submodule

[clouds56]

Changes

• in place replacement of Vuex
  • implements Vuex.{install, Module, Store}
  • later reference the new Vuex as VMD
• a store created with new VMD.Store would automatically install $statics to store
  • we could access mutations in actions when have $statics installed
  • we could have state, getters, mutations and actions directly accessible when using $statics
  • store.getters.$statics: statics of root
  • store.getters.$statics.path.to.submodule: statics of submodule
  • store.getters['$statics.path.to.submodule']: another way to access submodule
  • store.getters['namespace/of/submodule/$statics/key']: statics of submodule underlying getters/mutations/actions namespace/of/submodule/key
  • this approach support both static and dynamic generated module
• when use a Vue.use(Vuex) or Vue.use(VMD)
  • it would add a $stock that refers to store.getters.$statics for every Vue components
  • use with custom declare module makes life better

  declare module "vue/types/vue" {
      interface Vue {
          $stock: RootState;
      }
  }

• add support for submodule
  • @Submodule({module: MySubModule}) sub!: MySubModule
  • $statics works for submodule
• change new VuexModule(module) to VuexModule.create
  • VuexModule is no longer a Vuex.Module (which is confusing)
  • typeof VuexModule is still Vuex.Module<any, any>
• remove getModule
• other fixes
  • fix access of actions with {root: true}
  • fix rawError only affects exceptions in action when $statics not available

Show me code

import Vue from 'vue'
import Vuex, { Action, Module, Mutation } from 'vuex-module-decorators'
Vue.use(Vuex) // this would install both original Vuex and add $stock

@Module // namespace default to true, stateFactory default to true
class MySubmodule extends Vuex.Module { // Vuex.Module is the same as previous VuexModule
  data = 2

  @Mutation
  setWheels(data: number) {
    this.data = data * 2
  }

  @Action
  incrWheels(extra: number) {
    this.setWheels(this.axles + extra) // we could use state/getters/mutations in action
  }

  get axles() {
    return this.data / 2
  }
}

@Module
class MyModule extends Vuex.Module {
  @Submodule({ module: MySubmodule, namespaced: false })
  sub!: MySubmodule // override namespaced to false
}

const store = new Vuex.Store(MyModule) // this new Vuex.Store would automatically setup `$statics`

declare module "vue/types/vue" {
  interface Vue {
    $stock: MyModule; // custom type declaration helps
  }
}

const vue = new Vue({ store }) // this would setup vue.$store and vue.$stock
expect(vue.$stock.sub.axles).to.equal(1)
await vue.$stock.sub.incrWheels(5)
expect(vue.$stock.sub.axles).to.equal(6)

[codecov]

Codecov Report

Attention: Patch coverage is 96.71053% with 5 lines in your changes missing coverage. Please review.

Project coverage is 95.51%. Comparing base (6062b92) to head (27c920a).
Report is 46 commits behind head on master.

Files with missing lines	Patch %	Lines
src/submodule.ts	81.81%	2 Missing ⚠️
src/helpers.ts	94.11%	1 Missing ⚠️
src/module/index.ts	96.42%	0 Missing and 1 partial ⚠️
src/module/staticGenerators.ts	97.29%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #258      +/-   ##
==========================================
- Coverage   95.68%   95.51%   -0.17%     
==========================================
  Files          10       11       +1     
  Lines         139      223      +84     
  Branches       16       42      +26     
==========================================
+ Hits          133      213      +80     
- Misses          5        7       +2     
- Partials        1        3       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pattrickrice]

fix access of actions with {root: true}

What is the implication of this? Does it fix the "ERR_ACTION_ACCESS_UNDEFINED" errors?

Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @action?
That works only in dynamic modules.

[championswimmer]

ok this is interesting, but if we go this direction, I can entertain the possibility of a full re-write and do it this way only, and break semver (as in do a breaking change via semver major)

[clouds56]

What is the implication of this? Does it fix the "ERR_ACTION_ACCESS_UNDEFINED" errors?

Those are 2 topics.

• fix {root: 'true'} means in current implement, following code would not be accessible via getModule even in dynamic mode
  

  vuex-module-decorators/test/getmodule/getmodule_dynamic_namespaced.ts

  Lines 26 to 29 in 58f0454

  	@Action({ commit: 'incrCount', root: true })
  	async getCountDeltaRoot(retVal: number = 7) {
  	return retVal
  	}

  
  See changes in test/getmodule/getmodule_dynamic_namespaced.ts and src/module/staticGenerators.ts for more information

const namespacedKey = (actions[key] as any).root ? key : getNamespacedKey(namespace, key)

• And yes it fixes ERR_ACTION_ACCESS_UNDEFINED for static (non-dynamic) modules. As long as you replace new Vuex.Store to newStore
  see files in test/newstore for more example like test/newstore/newstore_action_access_state.ts
  • and it works for both traditional module or a VuexModule
  • access a _statics via store.$statics.getters.mm if module name is mm

[clouds56]

@championswimmer I'm glad to deprecate the old getModule way as it makes things like reusing a module harder.
If we do so, I think the code and/or the logic could be much more cleaner.

[Glandos]

I am currently struggling a submodule that is unavailable with the current getModule function in a component. This change will give me a better solution, at the cost of another global variable (here $stock). But I guess this is the price to pay for a strongly typed store.