鍍金池/ 問答/HTML  Office/ 在TypeScript + Vue的項(xiàng)目中, Vuex的mutations寫法報(bào)

在TypeScript + Vue的項(xiàng)目中, Vuex的mutations寫法報(bào)錯

項(xiàng)目使用vue-cli的webpack模板初始化, 引入vuex并同時(shí)安裝了vue-class-component. 在mutations.ts文件中, 如果使用以下的第一種方法定義mutation寫法會報(bào)錯(typescript沒有任何編譯錯誤), 但是第二種方法不會報(bào)錯:

import * as types from './mutations-types'

export default {
  //方法1:會報(bào)錯
  [types.INCREMENT_NUMBER](state, data: number):void {
    state.initNumber = data;
  }

  //方法2: 不會報(bào)錯
  // incrementNumber(state, data:number):void {
  //   state.initNumber = data;
  // }
}

報(bào)錯信息如下:

clipboard.png

  • store/index.ts文件如下:

    import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
})

  • main.ts文件如下:

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

  • vue-shim.d.ts文件如下:

    declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

  • tsconfig.json文件如下:

    {
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true, 
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strictFunctionTypes": false,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}
回答
編輯回答
舊螢火

已經(jīng)解決該問題, 使用vuex提供的MutationsTree方法即可解決個(gè)報(bào)錯問題, mutations.ts中的代碼如下

//mutations.ts

import * as types from './mutations-types'
import { MutationTree } from 'vuex'

const mutations: MutationTree<any> = {
  [types.INCREMENT_NUMBER](state, data:number): void {
    state.initNumber += data;
  }
}

export default mutations
2018年3月31日 08:29
編輯回答
話寡
import * as types from './mutations-types'

const mutations: any = {
  [types.INCREMENT_NUMBER](state, data:number): void{
    state.initNumber += data;
  }
}

export default mutations
2017年8月24日 23:39