Is there any progress?

[Deleted user]

Is there any progress?

// store/modules/product
export interface ProductState {
name: string
price: number
}
const state: ProductState = {
name: '',
price: 0
}

What can I do to know the state type in the Vue component?

@State(state => state.product.name) productName // can be inferred to be a string

[Deleted user]

ModuleA.ts
`interface ModuleA {
name: string;
hobby: string[];
}

const ModuleAState: ModuleA = {
name: 'fangfang',
hobby: ['看书'],
};

const getters = {
oath(state: ModuleA): string {
return ${state.name} love yueyue;
},
};

const actions = {
addHobby({ commit }: { commit: any }, hobby: string) {
commit('ADD_HOBBY', hobby);
},
};

const mutations = {
ADD_HOBBY(state: ModuleA, hobby: string): void {
state.hobby = [...state.hobby, hobby];
},
};

export default {
namespaced: true,
state: ModuleAState,
getters,
actions,
mutations,
};
store.ts
import Vue from 'vue';
import Vuex from 'vuex';
import ModuleA from './modules/moduleA';

Vue.use(Vuex);

export default new Vuex.Store({
modules: {
ModuleA,
},
state: {
name: 'test',
},
});
`

xx.vue
`

<script lang="ts"> import Vue from 'vue'; import { Component } from 'vue-property-decorator'; import DemoData from '@/components/DemoData.vue'; import DemoProps from '@/components/DemoProps.vue'; import DemoComputed from '@/components/DemoComputed.vue'; import DemoWatch from '@/components/DemoWatch.vue'; import DemoDirectives from '@/components/DemoDirectives.vue'; import DemoFilter from '@/components/DemoFilter.vue'; import DemoOnEmit from '@/components/DemoOnEmit.vue'; import { State, Getter, Action, Mutation, namespace, } from 'vuex-class'; const ModuleA = namespace('ModuleA/'); @component({ components: { DemoData, DemoProps, DemoComputed, DemoWatch, DemoDirectives, DemoFilter, DemoOnEmit, }, }) export default class Demos extends Vue { @State('name') public stateName!: string; @ModuleA.State('name') public ModuleAStateName!: any; @ModuleA.Getter('oath') public ModuleAGetterOath!: any; @ModuleA.Action('addHobby') public ModuleAActionAddHobby!: any; @ModuleA.State('hobby') public ModuleAStateHobby!: any; @ModuleA.Mutation('ADD_HOBBY') public ModuleAMutationAddHobby!: any; private created(): void { this.init(); } private init(): void { // 全局的state状态 // alert(this.stateName); // 命名空间的state状态 // console.log(this.ModuleAStateName); // 命名空间的getter // console.log(this.ModuleAGetterOath); // 使用dispath // this.ModuleAActionAddHobby(456); // console.log(this.ModuleAStateHobby); // 使用commit // this.ModuleAMutationAddHobby(1243); // console.log(this.ModuleAStateHobby); } } </script>

`

xx.vue ，vuex type is missing. Do you have any good solutions?

[ktsn]

You should manually annotate the mapped property types.

@Component
export default class Comp extends Vue {
  @State
  price!: number;
}