Vuex+TypeScript中字符串/布尔值不更新，数组正常的问题求助

我帮你拆解下这个问题的核心原因，以及对应的解决办法：

为什么字符串/布尔/数字状态不更新？ #

你在组件里是这么赋值的：

date = readDate(store);
testString = readCarsCounter(store);

这种写法只是在组件初始化时读取了一次Vuex状态的当前值，把这个值直接赋给了组件的普通属性。因为字符串、数字、布尔都是值类型，赋值的时候是做了一次值拷贝——也就是说，组件里的date和Vuex store里的date从此就是两个完全独立的变量了。哪怕之后Vuex里的状态更新了，组件里的这个属性也不会自动同步，自然界面就不会更新。

那为什么数组能正常更新？ #

数组属于引用类型，你赋值给组件cars的是数组的内存引用。当Vuex里的数组被修改（比如push新元素、替换整个数组），组件里的cars变量指向的还是同一个数组对象，Vue的响应式系统能检测到这个数组的变化，所以界面会跟着更新。

怎么解决？ #

核心思路是让组件的属性和Vuex状态建立响应式绑定，而不是只取一次初始值。这里有两种简单的实现方式：

方式一：使用组件计算属性 #

把原来的直接赋值改成计算属性，计算属性会自动追踪Vuex状态的变化，每次状态更新都会重新计算并返回最新值：

export default class DateVue extends Vue {
  // 用计算属性包裹read方法，实现响应式
  get date() {
    return readDate(store);
  }

  get cars() {
    return readCarsFromSse(store);
  }

  get testString() {
    return readCarsCounter(store);
  }

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

之后模板里直接用{{ date }}、{{ testString }}就可以实时获取最新的Vuex状态了。

方式二：使用Vuex的mapGetters辅助函数 #

如果习惯用Vuex的辅助函数，也可以直接把getters映射成组件的计算属性，代码更简洁：

import { mapGetters } from 'vuex';

export default class DateVue extends Vue {
  // 把getters映射为组件的计算属性
  ...mapGetters(['getDate', 'getCars', 'getCarsCounter'])

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

模板里直接使用{{ getDate }}、{{ getCarsCounter }}即可，同样能保持响应式更新。

内容的提问来源于stack exchange，提问作者Auryn