Temporarily give up personal blog turn js ts edition version of blog

I was going to be full of confidence vue + ts be a blog, in fact, take the architecture of almost, but I found a flaw with their own unbearable vuex when it is in use vuex time, was conducive to the general vuex version of the map is really handy syntactic sugar, which I used to put out some promise temper, and this is my firm choice of reason vue.
ts version:

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
@Module({
  namespaced: true,
  stateFactory: true,
})
export default class Common extends VuexModule {
  public theme: string = 'default'
  @Mutation
  public UPDATE_THEME(params: string) {
    this.theme = params
  }
  @Action({ commit: 'UPDATE_THEME' })
  updateTheme(params: string) {
    return params
  }
}

js version:

const state = {
  theme: 'default',
}

const mutations = {
  UPDATE_THEME(state, params) {
    state.theme = params
  },
}

const actions = {
  updateTheme: ({ commit }, params) => {
    commit('UPDATE_THEME', params)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

The above is the definition of a vuex modulecode is almost the same, accept, or ts version better. However, when used on a bit wrong.
Check github repository found vuex ts version relevant vuex-classand vuex-module-decorators
vuex-class:

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

This is very good, is what I want, but this is not supported modules, which is why I find another vuex library vuex-module-decorators, its official use the following code

// store/modules/MyStoreModule.ts
import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({
  name: 'MyStoreModule',
  namespaced: true,
  stateFactory: true,
})
export default class MyStoreModule extends VuexModule {
  public test: string = 'initial'

  @Mutation
  public setTest(val: string) {
    this.test = val
  }
}


// store/index.ts
import Vuex from 'vuex'
import MyStoreModule from '~/store/modules/MyStoreModule'

export function createStore() {
  return new Vuex.Store({
    modules: {
      MyStoreModule,
    },
  }
}

// components/Random.tsx
import { Component, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import MyStoreModule from '~/store/modules/MyStoreModule'

@Component
export default class extends Vue {
    public created() {
        const MyModuleInstance = getModule(MyStoreModule, this.$store);
        // Do stuff with module
        MyModuleInstance.setTest('random')
    }
}

The following is important getModuleusage, I have to go one by one import, looked on strenuous. So I gave up.
Pause blog address https://github.com/Algesthesiahunter/myBlog


There may be fine for a lot of bars, so to give up? I feel the need to vue3 and other official version came out in the reconstituted ts, and I look forward to and it will out of a super-compact version ts vuex, otherwise this ts lost a lot vue most important code simplicity. Should If so, I think it may consider the angular or react.

Guess you like

Origin www.cnblogs.com/smzd/p/11962184.html