暂时放弃ts版个人博客转js版博客

我本打算信心满满的做个vue+ts做个博客的，其实架构搭的差不多了，但是我在用vuex的时候发现一个自己无法忍受的瑕疵，那就是在用vuex的时候，得利于普通版vuex的map语法糖实在太好用，这把我惯出了许些脾气，这也是我坚定选择vue的原因。

ts版：

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版：

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,
}

以上是定义一个vuexmodule代码其实差不多，可以接受，或者说ts版更好。然而用的时候就有点不对了。

查阅github库找到了vuex ts版相关的vuex-class和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']
  }
}

这个很不错，是我想要的，然而这个不支持modules,这就是为什么我又找了另一个vuex库vuex-module-decorators,它的官方用法代码如下

// 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')
    }
}

重要的是下面getModule用法，我还得去一个个import，看着就费劲。所以我放弃了。

暂停的博客地址https://github.com/Algesthesiahunter/myBlog

会持续更新建设的博客地址https://github.com/Algesthesiahunter/algesthesiahunter.me

霜末之冬新博客https://algesthesiahunter.top

---

可能有很多杠精来说了，就这样就放弃了？我是觉得有必要等vue3正式版出来后在重构成ts，我也期盼同时会出个ts版超简洁的vuex，不然的话这个ts损失了很多vue最重要的代码简洁性。如若果真如此的话，我觉得可能考虑angular或者react了。