如何使用 vuex 进行响应式更新

Question

一般来说，Vuex 和 Vue 都是新手，我很难理解如何使用 Vuex "reactively"。同事尝试解释但没有做得很好或者我只是很笨，但他说可以观察商店的反应性更新以重新粉刷您的 UI.

我想我明白了计算属性背后的想法，比如它将与其函数体一起使用的属性包装在回调或其他东西中，并将在任何这些更改时重新评估整个函数。 Vuex 如何发挥作用？我看到了一些例子，比如商店的状态、吸气剂和突变

state: {
    user: null,
    role: null
},
getters: {
    getUser: state => state.user,
    getRole: state => state.role,
},
mutations: {
    setUser: ({state}, user) => {
        state.user = user
    },
    setRole: ({state}, role) => {
        state.user = role
    }
}

我只是没有弥合它与能够进行 UI 更新的组件之间的差距。我是否设置方法或类似我提到的可观察回调？

methods: {
    getUserFromStore () {
        return this.$store.getters.getUser
    }
}

我需要手动调用它以防止反应。我需要映射函数吗？

Answer 1

Do I need the mapper functions?

他们很有帮助，是的。他们将通过将 getters 包装在计算的属性.

中来收集它们

您也可以自己手动完成，但是您现有的代码试图将 getter 包装为一个方法。这是错误的，因为您没有 "call" getter。 Getters 是 Vuex 上下文中的 "computed" 属性。我不知道为什么它们的名称不同。但手动包装会喜欢：

computed: {
    user() {
        return this.$store.getters.getUser;
    }
}

这基本上就是 mapGetters 为您所做的。然后您的组件只引用 this.user

编辑：

此外，当您以某种方式转换数据时，通常会使用 getters。在您的情况下，如果您只需要在 Vuex 状态下引用 user，只需使用 mapState 代替：

computed: {
   ...mapState(['user']) // reference as this.user
}

Answer 2

如果我没有正确理解你的问题，Vuex 的反应性类似于 Vue 中的 computed 属性。考虑以下因素：

<template>
  <h2>{{ user }}</h2>
</template>

<script>
export default {
  computed: {
    // getters from store
    user () {
      return this.$store.getters.getUser
    }
}
</script>

只要 user 在商店中发生变化，计算出的属性 user 的值也会发生变化。

如何使用 vuex 进行响应式更新

How to use vuex for reactive updates

javascript

vue.js

vuex