Vue Vuex有类型记录Vuex对象未知类型

Question

我有一些问题，想让Vuex的打字稿工作。我做了一个没有打字稿的例子，效果很好，如下所示。我正在创建一个Vuex模块，然后添加它，如下所示

src ->商店-> index.js

import Vue from 'vue';
import Vuex from 'vuex';
import robotsModule from './modules/products';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    products: productsModule
  },
});

src ->存储->模块-> products.js

import axios from 'axios';

export default {
  namespaced: true,
  state: {
    products: [],
  },
  mutations: {
    addProduct(state, product) {
      state.products.push(product);
    },
    updateProduct(state, products) {
      state.parts = products;
    },
  },
  actions: {
    getProducts({ commit }) {
      axios
        .get('/api/products')
        .then(result => commit('updateProduct', result.data))
        .catch(console.error);
    }
  },
};

现在，当我想用打字本的时候，它总是抱怨

“绑定元素‘提交’隐式有‘任意’类型。”

如您所见，我目前已将状态指定为任何，这似乎也是错误的。我如何使这与打字稿很好地工作？

src ->存储->模块-> products.ts

import axios from 'axios';
import { Product } from '@/models/product';

export default {
  namespaced: true,
  state: {
    products: new Array<Product>(),
  },
  mutations: {
    updateProducts(state: any, products: Product[]) {
      state.products = products;
    },
    addProduct(state: any, product: Product) {
      state.products.push(product);
    },
  },
  actions: {
    getProducts({ commit }) {
      axios
        .get('/api/products')
        .then(result => commit('updateProducts', result.data))
        .catch(console.error);
    },
  },
};

Answer 1

我在网上找到了一个例子，它表明我需要将提交作为一个函数。

getProducts({ commit }: { commit: Function }) {

完整文件在这里

import axios from 'axios';

import { Product } from '@/models/product';
import State from '@/models/state';

export default {
  namespaced: true,
  state: {
    items: new Array<Product>(),
  } as State,
  mutations: {
    updateProducts(state: State, products: Product[]) {
      state.items = products;
    },
    addProduct(state: State, product: Product) {
      state.items.push(product);
    },
  },
  actions: {
    getProducts({ commit }: { commit: Function }) {
      axios
        .get('/api/products')
        .then(result => {
          commit('updateProducts', result.data);
        })
        .catch(console.error);
    },
  },
};

还创建一个状态类，然后我可以说它是我的状态对象。

import Vue from 'vue';
import { Product } from '@/models/product';

export default class State extends Vue {
  items: Product[] = new Array<Product>();
}

更新15-03-2021年-我的一位同事说他现在使用https://www.npmjs.com/package/direct-vuex，这使它更容易！

Answer 2

在Andrew的回答的基础上--您可以引入一些接口来整理代码：

export interface CommitFunction {
    commit: Commit;
}

export interface CommitStateFunction<T> extends CommitFunction {
    state: T;
}

所以你的行动看起来是：

actions: {
    getProducts({ commit }: CommitFunction) { /* logic here */ },
    updateProducts({ commit, state }: CommitStateFunction<State>) { /* logic here */ }
}