可以从 vuex 中创建的钩子中调用 getter 吗？答案

【问题标题】：Can getters be called from created hook in vuex?可以从 vuex 中创建的钩子中调用 getter 吗？
【发布时间】：2021-07-15 16:15:47
【问题描述】：

我有一个 getter，它返回篮子中的总价格。我需要在组件第一次渲染时调用这个 getter。在 created 钩子中调用这个 getter 是否正确？

created(){
    return this.$store.getters.getTotalPrice;
}

吸气剂

getTotalPrice(state){
    for (let i in state.basket){
        state.totalPrice += state.basket[i].productPrice;
    }
}

【问题讨论】：

你测试它是否有效？
是的，我收到错误“getTotalPrice 未定义”
嗨@ceren，欢迎来到SO您的问题的答案是肯定的，我建议您查看有关如何在SO上提问的指南，因为这个问题很快就会被否决...@987654321 @ 可能您面临的问题与在 created 钩子中调用 getter 无关，
我同意它应该可以工作。您的 Vuex 商店实现可能存在问题，您没有显示。此外，您在 created() 中返回 getter，但没有将返回值设置为任何值。
通常 getter 用于返回一个状态在这里你正在修改状态也许使用动作来代替？并且您应该从 getter 中返回一些东西，并在创建的钩子中将从 getter 返回的值分配给组件变量也许请说明您要实现的目标，以便我们可以为您提供更多帮助

标签： vue.js vuex getter

【解决方案1】：

以下是实现此目的的方法：

Vue 组件：

<script>
export default {
  data() {
    return {
       totalPrice:0
    };
  },
  created: function () {
    let self = this;
    self.totalPrice = self.$store.getters.getTotalPrice;
    console.log(self.totalPrice);
  },
};
</script>

在 Vuex 模块中定义 Getter：

const getters = {
  getTotalPrice: (state) => {
    let totalPrice = 0;
    for (let i in state.basket){
        totalPrice += state.basket[i].productPrice;
    }
    return totalPrice;
  },
};
export default {
  state,
  mutations,
  actions,
  getters
}

【讨论】：

将这个引用到 self 有什么意义？它们将指向同一个对象.. 如果 self.$store 将在您提出的解决方案中工作。那么 this.$store 也能正常工作。