计算属性和 Vuex

Question

我对计算属性如何与 Vuex 一起工作感到有点困惑。我正在使用计算 getter:

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

当存储数据改变时，计算的道具也会改变。到目前为止这么清楚。当现在为计算的属性分配一个新值时 - 商店内的值也会发生变化。不只是本地值的属性。为什么？我不需要 setter inside the computed prop 这样做吗？

编辑：我正在像这样分配新值。

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

我还在 select 下拉菜单中使用 v-model 来根据选项值更改它们。

Answer 1

未分配新值，但已更改现有值。

Getter-only computed ref 有 read-only value 属性包含未修改的值。

如果打算使 ref 值更深 read-only，这需要明确地完成：

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

Answer 2

我个人建议使用 vuex 中的 mapGetters：the mapgetters helper

我是这样工作的:

你在你的 vuex 商店中添加了一个 getter :

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

在你的 vue 组件中：

import { mapGetters } from 'vuex'

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

然后您可以使用 this.doneCount

从您的 getter 访问值

如果商店更改计算值将自动更改

计算属性和 Vuex

Computed properties and Vuex

vue.js

vuex