cuzox

cuzox

// main.ts

import  { createApp }  from  "vue"
import  App  from  "./src/App"

const app = createApp(App)

app.mount('#root')

export default app

cuzox

// stores.ts

import  { createStore }  from  "vuex"
import  {  PlainStore  }  from  './plain/types'
import app from './main'

export  const plainStore:  PlainStore  =  createStore({})
export  const modulesStore  =  createStore({})

app.use(plainStore)

cuzox

// src/vuex-module-decorators/persons.ts

import  {  VuexModule,  Module,  MutationAction, getModule }  from  "vuex-module-decorators"
import  {  PersonMapping  }  from  'src/types'
import  {  modulesStore  }  from  "src/stores"
import  {  persons  }  from  'src/static-persons'
import  _keyBy  from  'lodash/keyBy'

@Module({
	name:  'vmd',

cuzox

// src/vuex-class-modules/persons.ts

import { VuexModule,  Module,  Mutation,  Action } from  "vuex-class-modules"
import { modulesStore } from  "../stores"
import { Person,  PersonMapping } from  '../types'
import { persons } from  '../static-persons'
import  _keyBy  from  'lodash/keyBy'

@Module
class  PersonsModule  extends  VuexModule {

cuzox

// src/vue-class-component/VCCPersonList.vue

<script lang="ts">
import  {  Vue,  Component  }  from  'vue-property-decorator'
import  Persons  from  './persons'

@Component
class  VCCPersonList  extends  Vue {
	personFullName(id:  string){
		return  Persons.personFullName(id)

cuzox

// src/vuex-class-component/persons.ts

import  {  createModule,  mutation,  action, extractVuexModule,  createProxy }  from  'vuex-class-component'
import  {  modulesStore  }  from  "src/stores"
import  {  Person,  PersonMapping  }  from  'src/types'
import  {  persons  }  from  'src/static-persons'
import  _keyBy  from  'lodash/keyBy'

const  VuexModule  =  createModule({
	namespaced:  'vcc'

cuzox

// src/vuex-smart-module/VSMPersonList.vue

<script lang="ts">
import  {  Vue,  Component  }  from  'vue-property-decorator'
import  Persons  from  './persons'

@Component
class  VSMPersonList  extends  Vue {
	personFullName(id:  string){
		return  Persons.getters.personFullName(id)

cuzox

// src/vuex-smart-module/persons.ts

import  {  Getters,  Mutations,  Actions,  Module, registerModule }  from  'vuex-smart-module'
import  {  modulesStore  }  from  "../stores"
import  {  Person,  PersonMapping  }  from  '../types'
import  {  persons  }  from  '../static-persons'
import  _keyBy  from  'lodash/keyBy'

class  PersonsState {
	persons:  PersonMapping  = {}

cuzox

// src/vuex-typex/VTPersonList.vue

<script lang="ts">
import  {  Vue,  Component  }  from  'vue-property-decorator'
import  Persons  from  'src/vuex-typex/persons' // our module definition file

@Component
class  VTPersonList  extends  Vue {
	personFullName(id:  string){
		return  Persons.personFullName(id)