vuex的计算机

<style>

.calculator {

    width: 300px;

    margin: 0 auto;

    background-color: #f2f2f2;

    border: 1px solid #d9d9d9;

    border-radius: 10px;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

    padding: 10px;

    display: inline-block;

}

.display {

    text-align: right;

    margin-bottom: 10px;

}

.display-input {

    width: 100%;

    font-size: 24px;

    padding: 10px;

    border: none;

    border-bottom: 2px solid #3498db;

}

.buttons {

    display: flex;

    flex-direction: column;

}

.row {

    display: flex;

    justify-content: space-between;

}

.number-button,

.operator-button,

.calculate-button,

.clear-button {

    width: 70px;

    height: 70px;

    font-size: 24px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.2s;

}

.number-button {

    background-color: #3498db;

    color: #fff;

}

.operator-button {

    background-color: #e74c3c;

    color: #fff;

}

.calculate-button {

    background-color: #27ae60;

    color: #fff;

}

.clear-button {

    background-color: #f39c12;

    color: #fff;

}

.number-button:hover,

.operator-button:hover,

.calculate-button:hover,

.clear-button:hover {

    background-color: #2e86de;

}

</style>

<template>

    <div class="calculator">

        <div class="display">

            <input v-model="inputValue" type="text" disabled class="display-input" />

        </div>

        <div class="buttons">

            <div class="row">

                <button @click="appendNumber(1)" class="number-button">1</button>

                <button @click="appendNumber(2)" class="number-button">2</button>

                <button @click="appendNumber(3)" class="number-button">3</button>

                <button @click="appendOperator('+')" class="operator-button">+</button>

            </div>

            <div class="row">

                <button @click="appendNumber(4)" class="number-button">4</button>

                <button @click="appendNumber(5)" class="number-button">5</button>

                <button @click="appendNumber(6)" class="number-button">6</button>

                <button @click="appendOperator('-')" class="operator-button">-</button>

            </div>

            <div class="row">

                <button @click="appendNumber(7)" class="number-button">7</button>

                <button @click="appendNumber(8)" class="number-button">8</button>

                <button @click="appendNumber(9)" class="number-button">9</button>

                <button @click="appendOperator('*')" class="operator-button">*</button>

            </div>

            <div class="row">

                <button @click="calculateResult()" class="calculate-button">=</button>

                <button @click="clearInput()" class="clear-button">C</button>

            </div>

        </div>

    </div>

</template>

<script>

export default {

    data() {

        return {

            inputValue: '',

        };

    },

    methods: {

        appendNumber(number) {

            this.inputValue += number.toString();

        },

        appendOperator(operator) {

            this.inputValue += ` ${operator} `;

        },

        calculateResult() {

            const result = eval(this.inputValue);

            this.$store.dispatch('updateCurrentValue', result);

            this.inputValue = result.toString();

        },

        clearInput() {

            this.inputValue = '';

        },

    },

};

</script>

store下面的index.js

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const state = {

  currentValue: 0,

};

const mutations = {

  SET_CURRENT_VALUE(state, value) {

    state.currentValue = value;

  },

};

const actions = {

  updateCurrentValue({ commit }, value) {

    commit("SET_CURRENT_VALUE", value);

  },

};

export default new Vuex.Store({

  state,

  mutations,

  actions,

});