javascript - Vuex TypeScript 不更新 String，而是更新 Array

Question

我目前正在使用 vue“工作”。商店正在更新我的数组，但不更新我的字符串或 bool 值。

我的代码是 here :

我每秒都提交我的字符串，但该字符串没有显示在前端(vuex 开发工具显示状态正确，我的控制台日志不正确)

我的商店看起来像这样:

const state: State = {
  cars: [],
  date: "false",
  carsCounter: 0,
};

我的导出:

const getters = {
  getCars(state: State) {
    return state.cars;
  },
  getDate(state: State) {
    return state.date;
  },
  getCarsCounter(state: State) {
    return state.carsCounter;
  }
};

const { read, commit, dispatch } = getStoreAccessors<State, State>("");

export const readCarsFromSse = read(getters.getCars);
export const readDate = read(getters.getDate);
export const readCarsCounter = read(getters.getCarsCounter);

我在日期组件中使用它是这样的:

export default class DateVue extends Vue {
  date = readDate(store);
  cars = readCarsFromSse(store);
  testString = readCarsCounter(store);

  mounted() {
    Timeloader.loadTime();
  }

}

有谁知道为什么字符串没有更新但数组更新了？

谢谢

Answer 1

did anyone know why the strings are not updated but the array is?

在 View 中，您使用一次矫揉造作从您的 Vuex 状态中获取值。当你得到一个数组时，Vuex 返回数组的观察者，并且项目值会保持最新。但原始值只是原始值。

这是一个解决方案，使用 vuex-class :

安装vuex类:

npm install vuex-class

然后:

import { Component, Vue } from "vue-property-decorator";
import { Getter } from "vuex-class";

@Component
export default class DateVue extends Vue {
  @Getter("getDate")
  date!: string;
  @Getter("getCars")
  cars!: any[];
  @Getter("getCarsCounter")
  testString!: number;

  mounted() {
    Timeloader.loadTime();
  }
}

……或者没有vuex-class(auryn31提供的解决方案):

export default class DateVue extends Vue {
  get date() { return readDate(store); }
  // etc.
}