Vuex 基于浮点数的存储值存储为字符串

Question

我已经在桌面上创建了 Vuejs 前端项目。我正在使用 Vuex 进行集中式状态管理。我的状态有 TotalAmount 和 Profit 值，我正在尝试对这两个状态进行加法和减法操作。当然，减少工作良好但增加功能将它们连接到状态。假设：

TotalProfit:1.05465
Profit:0.0012

在 1.054650.0012 上增加函数 returns。

Store.js 文件:

const state = {
    TotalBalance: 0,
    Profit:0.00000000
};
const actions = {
    setTotalBalance(context, data) {
        context.commit('setTotalBalance', parseFloat(data).toFixed(8))
    },
    increaseTotalBalance(context, data) {
        context.commit('increaseTotalBalance', parseInt(data).toFixed(8))
    },
    decreaseTotalBalance(context, data) {
        context.commit('decreaseTotalBalance', parseFloat(data).toFixed(8))
    },
    setProfit(context, data) {
        context.commit('setProfit', data)
    },
}
const mutations = {
    setTotalBalance(state,TotalBalance){
        state.TotalBalance = Number(parseFloat(TotalBalance).toFixed(8));
    },
    increaseTotalBalance(state,Balance){
        state.TotalBalance = Number(parseFloat(state.TotalBalance ).toFixed(8))+Number(parseFloat(Balance).toFixed(8))
    },
    decreaseTotalBalance(state,Balance){
        state.TotalBalance = parseFloat(state.TotalBalance ).toFixed(8)-parseFloat(Balance).toFixed(8)
    },
    setProfit(state,Profit){
        state.Profit = Number(parseFloat(Profit).toFixed(8))
    }
}
const getters = {
    getTotalBalance: state=>{
        return state.TotalBalance
    },
    getProfit: state => {
        return state.Profit
    }
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

正如您从上面的文件中看到的，我尝试了很多不同的方法，但我自己没有找到任何解决方案。

Answer 1

toFixed returns 一个 string，所以你得到连接的字符串。相反，您可以只执行 +string 将字符串转换为数字，并在需要显示时在 getter 中截取 8 位数字：

const store = new Vuex.Store({
  state: {
    TotalBalance: 1.05465,
    Profit: 0.0012
  },
  mutations: {
    increaseTotalBalance(state,Balance){
      state.TotalBalance = +state.TotalBalance + +Balance;
    },
    decreaseTotalBalance(state,Balance){
      state.TotalBalance = +state.TotalBalance - +Balance;
    },
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    total: function() {
      return Number(this.$store.state.TotalBalance).toFixed(8);
    },
    profit: function() {
      return Number(this.$store.state.Profit).toFixed(8);
    }
  },
  methods: {
    inc: function() {
      this.$store.commit('increaseTotalBalance', this.profit)
    },
    dec: function() {
      this.$store.commit('decreaseTotalBalance', this.profit)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>

<div id="app">
  <p>{{ total }}, {{ profit }}</p>
  <button @click="inc">Inc</button>
  <button @click="dec">Dec</button>
</div>

Vuex 基于浮点数的存储值存储为字符串

Vuex float based store value stored as string

vue.js

vuex