Understanding Mutations and Actions in vuex

For example, if you keep an array of unique IDs and add/remove them, you will need to determine if they have already been added.I wonder whether I should make this decision with mutation, action, or both.

I think it's better to change it whenever the mutation process runs.Then, I would like to see the state in action and run the mutation process if necessary.However, in vue, mutation can be performed from anywhere, so I am worried about whether to change it only to action or not."In the first place, what is the idea that ""if you commit, it will definitely be changed"" itself?"

Let me know what you think.

state:{
    someList: [1,2,3],
},
mutations: {
    add(state,id){
        state.someList.push(id);
    },
    remove(state,id){
        state.someList.splice(state.someList.indexOf(id), 1);
    },
},
actions: {
    add({commit,state},{id}){
        if(state.someList.indexOf(id)<0){
            commit('add',id);
        }
    },
    remove({commit,state},{id}){
        if(state.someList.indexOf(id)>=0){
            commit('remove',id);
        }
    },
}

javascript vue.js

2022-09-30 20:19

2 Answers

Personally, I think it would be better to implement it as follows.

Personally, I think Vuex is a framework for maximizing the nature that states representing the global state of applications are synchronously changed by mutation.
For example, if you look at Vue.js Devtool, you can see the history of mutation and store status, so it is recommended that you organize the logic in that way.

In this case, I personally think mutation is good to describe this logic because it is synchronous and it seems that it is what I want to do to describe the basic state change logic without touching other store elements.

2022-09-30 20:19

I wonder whether I should make this decision with mutation, action, or both.

I don't want to do both.Also, considering the possibility that mutation will be called directly, I think it would be better to add a branching process to mutation and just commit the action.

I don't know the other code, so the following is my guess.

For example, if the status is expressed as a list component using v-for, it is not necessary to check the existence of remove because there are no items in the list that do not exist in someList

If you want someList to keep a unique value, commit can be represented by the following code using lodash:

mutations:{
  add(state,id){
    state.someList=_.uniq(state.someList.push(id))
  },
}

2022-09-30 20:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656