Computed properties and Vuex-CodePudding

I'm a little confused on how computed properties work with Vuex. I'm using a computed getter:

var selectDisplayValues = computed({
    get() {
        return store.getters['expense/getSelectDisplayValues'];
    }
});

When the store data changes the computed prop also changes. So far so clear. When now assigning a new value to the computed property - the value inside the store also changes. Not just the local value of the property. Why is that so? Won't I need a setter inside the computed prop to do so?

EDIT: I'm assigning the new values like this.

selectDisplayValues.value[`inputData[${props.index}][${props.attribute}]`] = {placeholder_value: "Bitte wählen...", value: "", reassigned: false};

Also I'm using a v-model on a select dropdown for changing them according to the options value.

CodePudding user response：

A new value wasn't assigned but existing value was mutated.

Getter-only computed ref has read-only value property that contains unmodified value.

If the intention is to make ref value deeply read-only, this needs to be explicitly done:

const selectDisplayValues = readonly(toRef(store.getters, 'expense/getSelectDisplayValues'))

CodePudding user response：

I would personaly recommand using mapGetters from vuex : the mapgetters helper

I works like this :

You decalre a getter un your vuex store :

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

And in your vue component :

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters({
      doneCount: 'doneTodosCount'
   })
  }
}

You can then access value from your getter with this.doneCount

If the store change the computed value wil automatically change