Vuex TypeScript 不会更新 String，而是更新 Array

Question

我目前正在使用 vue。商店正在更新我的数组，但不会更新我的字符串或布尔值。

我的代码是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

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

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

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

安装vuex-class:

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.
}