时间戳

首页 > 解决方案 > 带有 Typescript Vuex 对象的 Vue Vuex 未知类型

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

问题描述

我在尝试让 Vuex 与 Typescript 一起工作时遇到问题。我做了一个没有打字稿的例子，它工作得很好，如下图所示。我正在创建一个 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' 类型。”

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

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

标签： typescriptvue.jsvuex

解决方案

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

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，这更容易！

推荐阅读