Vuexフロートベースのストア値が文字列として格納されています

Question

私はデスクトップにVuejsフロントエンドプロジェクトを作成しました。私は集中管理のためにVuexを使用しています。私は自分の州にTotalAmountとProfitの値を持っていて、私はこれらの州の両方に対して加算と減算をしようとしています。確かに、うまく機能しなくなりますが、機能を増やすと状態につながります。 のは、としましょう：

TotalProfit:1.05465 
Profit:0.0012 

増加関数は1.054650.0012に返します。

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文字列を返します。連結された文字列が得られます。代わりに、あなただけの数に文字列を変換する+stringを行うには、あなたがそれを表示する必要があるときゲッターで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>