带有Typescript Vuex对象的Vue Vuex未知类型

Question

我在尝试使用 Typescript 运行 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);
    }
  },
};

现在，当我想使用打字稿时，它一直在抱怨

“绑定元素‘commit’隐式具有‘any’类型。”

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

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);
    },
  },
};

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

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

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

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