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

Question

总的来说，对于 Vuex 和 Vue 来说，我很难理解 Vuex 是如何“响应式”使用的。同事尝试解释，但没有做得很好，或者我只是很笨，但他说可以观察商店的 react 性更新来重新绘制你的 UI。

我想我明白了计算属性背后的想法，就像它将与函数体一起使用的属性包装在回调或其他东西中，并且会根据任何这些更改重新评估整个函数。 Vuex 是如何发挥作用的？我看到一些示例，例如商店的状态、 setter/getter 和突变

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

我需要手动调用它，因此它不利于 react 性。我需要映射器功能吗？

Answer 1

Do I need the mapper functions?

是的，他们非常有帮助。他们将通过将 setter/getter 包装在计算属性中来将 setter/getter 向下漏斗。

您也可以自己手动执行此操作，但您现有的代码正在尝试将 getter 包装为方法。这是错误的，因为您没有“调用” setter/getter 。 Getter 是 Vuex 上下文中的“计算”属性。我不知道为什么它们的命名不同。但手动换行会喜欢:

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

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

编辑:

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

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