Vuex TypeScript does not update String, but Array

Question

I am currently "working" with vue. The store is updating my array, but does not update my string or boolean.

My code ist here:

i commit my string every second and the string does not show up at the frontend (vuex dev tools show the state is correct, my console log does not)

My Store looks like this:

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

my export:

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);

and I use it in the date component like this:

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

  mounted() {
    Timeloader.loadTime();
  }

}

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

thanks

ah sorry: const { read, commit, dispatch } = getStoreAccessors<State, State>(""); — Auryn
– Auryn, Commented Jul 19, 2019 at 9:37

Paleo · Accepted Answer · 2019-07-22 08:26:28Z

2

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

In the view, you use affectation once to get values from your Vuex state. When you get an array, Vuex returns the observer of the array, and the item values will be kept up-to-date. But primitive values are just primitive values.

Here is a solution, using vuex-class:

Install vuex-class:

npm install vuex-class

Then:

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();
  }
}

… Or without vuex-class (solution provided by auryn31):

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

edited Jul 22, 2019 at 8:26

answered Jul 19, 2019 at 9:32

Paleo

24k5 gold badges74 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Auryn Over a year ago

but I must be possible to use primitive values in vuex, they use it in there docu as well 🤔

Paleo Over a year ago

@auryn31 Which documentation?

Paleo Over a year ago

@auryn31 In this documentation, you'll find several examples on how to use a value from a Vuex store. You can do: computed: { count () { return this.$store.state.count } } or use the mapState Helper.

Auryn Over a year ago

thanks, I worked it out by using an object instead of an primitive value

Auryn Over a year ago

ok, the answer was to use get :-D get date() { return readDate(store); }

Collectives™ on Stack Overflow

Vuex TypeScript does not update String, but Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related