逻辑图
![在这里插入图片描述](https://img-blog.csdnimg.cn/059124e2822948b88ebdd6f7d07d0f6d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54ix5a2m5Lmg55qE5bCP5by6fn4=,size_20,color_FFFFFF,t_70,g_se,x_16)
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>