我如何更新我的vuex存储的状态？

carvr3hs 于 2023-01-21 发布在 Vue.js

关注(0)|答案(2)|浏览(128)

我是新来的，所以请原谅我，如果我写的不好或代码部分...仍然试图弄清楚。
所以我尝试了很多形式来达到我想要的结果，但是没有成功...
基本上，应用程序是得到一个工资（金额），并有在帐户（currentSalar）的总和，这两个都是从类型字符串，而不是数字...我需要找到一种方法来休息的工资总额，显然更新它。
这里有一些截图，如果有人可以帮助我，请。

**/index.js** 

import  mutations  from './mutations.js';
import actions from './actions.js';
import getters from './getters.js';

export default {
    namespaced: true, 

    state() {
        return {
            registers: [
                {
                    id: 'user1',
                    currentSalar: '4,400' ,
                    saves: '12,000',
                    currency: '₪',
                    expense: [{salary: '3,000', category: 'Bar:'}]
                },
                {
                    id: 'user2',
                    currentSalar: '100,000',
                    saves: '3,000,000',
                    currency: '$',
                    expense: []
                }
            ]
        }
    },

    mutations,
    actions,
    getters
}

**/mutations.js**

export default {
  addRegister(state, payload) {
    const registerToUpdate = state.registers.find(
      (register) => register.id === payload.id
    );

    const expenses = registerToUpdate.expense;  //////* find((expense) => expense.salary === payload.salary) */
    const salary = +expenses.salary;
    let current = +registerToUpdate.currentSalar;

    const newCurrnt = current -= salary;   // should calculate a new value (UPDATE) for the currentSalar by resting the salary
    console.log(newCurrnt);

    expenses.unshift(payload);
  },
};
```````````````````
**/actions.js**

export default {
    addRegister(context, data) {
        const RegisterData = {
            id: context.rootGetters.userId,
            category: data.category,
            salary: data.salary
        }

        context.commit('addRegister', RegisterData);
    }
}

/component

vue.js

来源：https://stackoverflow.com/questions/75142122/how-can-i-update-the-state-of-my-vuex-store

2条答案

按热度按时间

toiithl61#

JavaScript无法将数字理解为字符串。
当你想做算术运算时（我猜你会这么做，因为你开发的应用程序与会计有关），你必须处理数字：

registers: [
    {
      id: "user1",
      currentSalar: 4400,
      saves: 12000,
      currency: "₪",
      expense: [{ salary: 3000, category: "Bar:" }],
    },
    {
      id: "user2",
      currentSalar: 100000,
      saves: 3000000,
      currency: "$",
      expense: []
    }
  ]

即使当您从编写得很差的API（以字符串形式返回数字）获取这些数据时，您要做的第一件事是在将它们放入存储之前将它们转换为数字。
当你试图将一个字符串转换为数字（通过附加+），如果字符串包含千位分隔符作为逗号（或者任何不是数字、点或科学数字符号的东西-例如：'-3e6'），您将返回NaN。
在这里查看：

const num = '1,000,000'

console.log( +num ) // NaN

// strip commas from it:
console.log( +num.replaceAll(',', '') ) // 1000000

当您想向用户显示商店中使用的数字时，如果您想在它们上面放置千位和小数分隔符，请使用Intl.NumberFormat。

赞(0）回复(0）举报 2023-01-21

uklbhaso2#

已解决：）
下面是代码：

`
// index.js
import  mutations  from './mutations.js';
import actions from './actions.js';
import getters from './getters.js';

export default {
    namespaced: true, 

    state() {
        return {
            registers: [
                {
                    id: 'user1',
                    currentSalar: 4400 ,
                    saves: 12000 ,
                    currency: '₪',
                    expense: []
                },
                {
                    id: 'user2',
                    currentSalar: 100000,
                    saves: 3000000,
                    currency: '$',
                    expense: []
                }
            ]
        }
    },

    mutations,
    actions,
    getters
}`

`
// mutations.js

export default {
  addRegister(state, payload) {
    const registerToUpdate = state.registers.find(
      (register) => register.id === payload.id
    );
    
    let current = registerToUpdate.currentSalar;
    const expenses = registerToUpdate.expense;

    current -= payload.salary;
    console.log(current);
   
    expenses.unshift(payload);
    registerToUpdate.currentSalar =  registerToUpdate.currentSalar - 
payload.salary;
  },
};`

赞(0）回复(0）举报 2023-01-21

我来回答

我如何更新我的vuex存储的状态？

2条答案

相关问题

热门标签

最新问答