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

Vuex TypeScript不会更新字符串，但会更新数组

1 个答案: