Vuex float based store value stored as string - vue.js

Question

I've created Vuejs frontend project on my desktop. I am using Vuex for the centralized state management. I've TotalAmount and Profit values on my states and I am trying to do addition and subtract operations for both of those states. Sure, decrease working well but increase function concatenate those to states.
Let's suppose:
TotalProfit:1.05465
Profit:0.0012
increase function returns on 1.054650.0012.
Store.js File:
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
})
As you can see from the file above, I tried many different ways however not found any solution myself.

Answer 1

toFixed returns a string, so you get concatenated strings. Instead you can just do +string to convert a string into number, and cut 8 digits in a getter when you need to display it:
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>