typescript+vue-cli3项目报错[vuex] unknown mutation type

Question

typescript+vue-cli3项目报错[vuex] unknown mutation type

发布于
2019-06-11

更新于
2019-06-11

问题描述

用vue-cli3写了一个typescript的demo，在用vue-property-decorator写vuex的时候出现了问题，store里的state已经拿到了，但是getter、mutations、action都无法调用，提示[vuex] unknown action type: asyncAdd之类的错误

问题出现的环境背景及自己尝试过哪些方法

最近想学一下ts，所以用vue-cli3写了一个ts的demo，想进一步熟悉一下ts在vue里的用法，查阅了一些资料，还是失败。尝试过的方法有：

1、

    @Action('store') asyncAdd
    
    this.asyncAdd({ value: true })

参考文章：https://blog.csdn.net/qq_3344...

2、

export default {
    asyncAdd(context: any, paylod: any) {
        setTimeout(() => {
            context.commit('add', paylod.num);
        }, 1000);
    },
};

public addAsync(num: any) {
    this.$store.dispatch('asyncAdd', {num});
}

参考文章：https://www.jianshu.com/p/611...

等等。。。

相关代码

// store.ts

interface State {
  id: number;
  userName: string;
}

const state: any = {
  userName: 'vuex-typescript state demo',
};

const mutations: MutationTree<any> = {
  add(status: State, payload: any): void {
    state.userName = payload.userName + 'mutasions setState';
  },
};

const actions: any = {
  asyncAdd(context: any, payload: any) {
    setTimeout(() => {
      console.log('-----actions began-----');
      context.commit('add', payload);
      console.log(payload);
      console.log('-----actions end-----');
    }, 500);
  },
};

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

// Home.vue

<div @click="addAsync({ userName: 'test' })">异步：{{store.userName}}</div>

import { Component, Vue, Watch } from 'vue-property-decorator';

import {
  State,
  Getter,
  Action,
  Mutation,
  namespace,
} from 'vuex-class';

const store = namespace('store');

@Action private asyncAdd: any;

public add() {
    this.$store.commit('add');
}
    
public addAsync(num: any) {
    this.$store.dispatch('asyncAdd', {num});
}