vuex实现简易计算器代码

vuex实现简易计算器代码

comput.vue组件代码

<template>
  <div :class="isor?'beijing':''">
    <div style="margin-left: 130px">
      <h2>计算器</h2>
      <el-input v-model="input" disabled/>
      <div>
        <button @click="handle1(1)">1</button>
        <button @click="handle1(2)">2</button>
        <button @click="handle1(3)">3</button><button @click="handleC">/C</button><button @click="handleclear" style="width:50px;height:30px">退格</button> <br />
        <button @click="handle1(4)">4</button>
        <button @click="handle1(5)">5</button>
        <button @click="handle1(6)">6</button><button @click="handleadd">+</button> <button @click="handleresult">=</button><br />
        <button @click="handle1(7)">7</button>
        <button @click="handle1(8)">8</button>
        <button @click="handle1(9)">9</button><button @click="handlesub">-</button> <br />
        <button @click="handle1(0)">0</button>
        <button @click="handle1('.')">.</button>
        <button @click="handlecheng">*</button>
        <button @click="handlechu">/</button>
      </div>
      <el-button type="primary"  @click="changebeijing">更换背景</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      isor: true
    }
  },
  methods: {
    ...mapMutations(['handles1', 'handleaddstore', 'handleresultStore', 'handleCCC', 'handlesubstore', 'handlechengstore', 'handlechustore', 'handleclearinput']),
    handle1 (n) {
      this.handles1(n)
    },
    handleadd () {
      this.handleaddstore()
    },
    handleresult () {
      this.handleresultStore()
    },
    handleC () {
      this.handleCCC()
    },
    handlesub () {
      this.handlesubstore()
    },
    handlecheng () {
      this.handlechengstore()
    },
    handlechu () {
      this.handlechustore()
    },
    changebeijing () {
      this.isor = !this.isor
      console.log(this.isor)
    },
    inputhandle (e) {
      this.handles1(e.target.value)
    },
    handleclear () {
      this.handleclearinput()
    }
  },
  computed: {
    ...mapState(['input'])
  }
}
</script>
<style scoped>
button {
  margin: 10px 10px;
  width: 40px;
  height: 40px;
}
.el-input {
  width: 300px;
}
.el-button{
  width: 120px;
}
.beijing {
  background:#FFCBCF;
  height: 750px;
}
</style>

store >index.js数据仓储

import Vue from 'vue'
import Vuex from 'vuex'
// import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    input: '',
    Number1: 0,
    Number2: 0,
    types: '+'
  },
  mutations: {
    // 计算器相关方法
    handles1 (state, n) {
      state.input += n.toString()
    },
    handleaddstore (state) {
      if (state.input !== '') {
        state.Number1 = parseFloat(state.input)
        state.input = ''
        state.types = '+'
        console.log('加法')
      }
    },
    handleresultStore (state) {
      state.Number2 = parseFloat(state.input)
      if (state.types === '+') {
        state.input = state.Number1 + state.Number2
      } else if (state.types === '-') {
        state.input = state.Number1 - state.Number2
      } else if (state.types === '*') {
        state.input = state.Number1 * state.Number2
      } else if (state.types === '/') {
        state.input = state.Number1 / state.Number2
      } else {
        return null
      }
    },
    handleCCC (state) {
      state.input = ''
      state.Number1 = 0
      state.Number2 = 0
    },
    handlesubstore (state) {
      if (state.input !== '') {
        state.Number1 = parseFloat(state.input)
        state.input = ''
        console.log('减法')
        state.types = '-'
      }
    },
    handlechengstore (state) {
      if (state.input !== '') {
        state.Number1 = parseFloat(state.input)
        state.input = ''
        console.log('乘法')
        state.types = '*'
      }
    },
    handlechustore (state) {
      if (state.input !== '') {
        state.Number1 = parseFloat(state.input)
        state.input = ''
        console.log('除法')
        state.types = '/'
      }
    },
    handleclearinput (state) {
      state.input = state.input.toString()
      if (state.input.length !== 0) {
        state.input = state.input.substr(0, state.input.length - 1)
      } else {
        return alert('已经没有内容了')
      }
    }
  },
  actions: {},
  getters: {},
  modules: {}
})

我是以组件的形式写进app.vue的，这是App.vue开始的是comput.vue组价代码

<template>
  <div id="app">
    <comput></comput>
  </div>
</template>

<script>
import comput from './components/comput'
export default {
  name: 'app',
  data () {
    return {}
  },
  methods: {},
  components: {
    comput
  },
  computed: {}
}
</script>

<style>
</style>

效果图