vuex getters 返回一个函数

最新推荐文章于 2025-03-17 17:58:34 发布

宇宙无敌饼干小怪兽

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量351

点赞数

分类专栏： Vuex 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/zhuoss/article/details/120328165

版权

Vuex 专栏收录该内容

17 篇文章

订阅专栏

逻辑图

在这里插入图片描述

index.js

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      counter: 10,
      name: "Alice",
      age: 19,
      height: 180,
      books: [
        { name: "Alice", price: 10, count: 1 },
        { name: "Bruce", price: 9, count: 1 },
        { name: "Celina", price: 11, count: 1 },
      ],
    };
  },
  getters: {
    totalBooksPrice(state) {

      return function (disCount) {

        let totalPrice = 0;
        for (const book of state.books) {
          totalPrice += book.price * book.count * disCount;
        }
        return totalPrice;
        
      };

    },
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
  },
  actions: {},
  modules: {},
});

Home.vue

<template>
  <div class="home">
    <table border="1">
      <h2>{{ $store.getters.totalBooksPrice(0.8) }}</h2>
    </table>
  </div>
</template>

<script>
export default {
  setup() {},
};
</script>

<style></style>