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 module
code 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-class
and 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 getModule
usage, I have to go one by one import, looked on strenuous. So I gave up.
Pause blog address https://github.com/Algesthesiahunter/myBlog