带有 TypeScript 数组 .push 的 VueX 不是函数答案

【问题标题】：VueX with TypeScript array .push is not a function带有 TypeScript 数组 .push 的 VueX 不是函数
【发布时间】：2020-07-26 18:18:10
【问题描述】：

我创建了一个 VueX 存储文件，如下所示：

// Import packages
import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersistence from 'vuex-persist';

// Import models
import Problem from './models/Problem';

// Create localStorage persistence object
const vuexLocal = new VuexPersistence<RootState>({
  storage: window.localStorage,
});

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    problems: Array<Problem>(),
  },

  mutations: {
    addProblem(state: any, problem: Problem) {
      state.problems.push(problem);
    },
    setProblems(state: any, problems: Array<Problem>) {
      state.problems = problems;
    },
  },

  actions: {
    addProblem(context: any, problem: Problem) {
      context.commit('addProblem', problem);
    },
    setProblems(context: any, problems: Array<Problem>) {
      context.commit('setProblems', problems);
    },
  },

  plugins: [vuexLocal.plugin],
});

但是当我尝试使用 addProblem 操作时，控制台返回此错误

TypeError: state.problems.push 不是函数

我不明白为什么，因为我已经正确启动了数组（我认为？），当我查找诸如 this 之类的教程时，他们似乎能够使用 push 就好了。

【问题讨论】：

将问题状态初始化为一个空数组。像`state：{问题：[]，}这样的东西。我想测试一个理论。
仍然导致同样的问题@Tony
当相关状态（在本例中为state.problems）未返回数组时，通常会导致此错误。检查 vue devtools 以确认它返回一个数组。
啊，你是对的，它确实只是显示了一个数字@Tony :(

标签： typescript vuex

【解决方案1】：

Array.push 的返回类型为number（数组的新长度）。因此，您的代码中的以下行会导致 problems 成为数字而不是数组：

      state.problems = state.problems.push(problem);

【讨论】：

有点跑题了，但这就是打字稿不希望你使用any的原因，就像state: any一样。
我已经更改了推送功能，但它仍然返回相同的错误，根据您的评论，如果我删除任何它仍然会导致相同的错误但 VS 代码只是抱怨它所以我应该怎么做处理吗？
对 typescript 的打字系统的任何更改都不会在运行时导致任何更改。它明确用于在编译期间检查您的时间，因此您看不到任何更改。您应该锻炼 IDE 指出的任何内容来解决问题。提示：问题未定义/不是数组

【解决方案2】：

我忘记了我使用的是持久存储，因为我使用的是持久存储，我之前已将数组设置为一个数字。每次我重新加载页面时，它都会返回到这个数字。

解决方案只是重置本地存储！

【讨论】：