When using vuex, create a new mutation-types.js file under the store folder. The content is to change the case. What's the use?

when using vuex, you can see that some projects create a new mutation-types.js file under the store folder, such as the following: 

export const RECEIVE_ADDRESS = "receive_address" // 
export const RECEIVE_USER_INFO = "receive_user_info" // 
export const RESET_USER_INFO = "reset_user_info" // 
//...

what is the use of changing case like this? I feel a little superfluous. I"d like to ask the boss to talk.

Vue.js javascript
May.26,2021
The single responsibility of

is to categorize mutation into a file. In theory, you can write whatever lowercase you like, but it will reduce the readability in the information displayed by some debugging tools. Another point is that when you commit mutation, you can also write the lower case part directly without using the variable VERB_FOO, but the problem is that when you want to change a mutation, You have to change all the code that depends on it, and it's too coupled.

in general, when the value of a variable is constant, the variable is represented in uppercase, so seeing a variable in uppercase may indicate that the variable represents a constant.

another case is what you said upstairs. When you use this constant in many places, you can only change the value of the constant one by one, and save it with a variable, and each place references a variable. In this way, only the assignment of the variable can be changed.

  1. reduce hard coding, for example, when "reset_user_info" exists in multiple places, using constants to reference, it is more maintainable and reduces the error of shaking one letter more and one letter less.
  2. when multi-person development of large projects, the unified management of mutations, find the function is very intuitive.
  3. you can name the mutation type according to the module category, as long as the name is, and just keep the constant name short. For example: 
export const RESET_USER_INFO = 'user/reset_user_info'
export const GET_PRO_LIST = 'product/get_list'

if you have a small personal project, you don't have to use it. It's troublesome to turn around.

before, I also encountered the same questions as the owner when I read the code of the project.

Today, when I was reading the Vuex document, I found that there was a description in the document:

replacing mutation event types with constants is a common pattern in various Flux implementations. This allows tools such as linter to work, and putting these constants in a separate file allows your code collaborators to see at a glance the mutation contained in the entire app

ide/mutations.html-sharp%E4%BD%BF%E7%94%A8%E5%B8%B8%E9%87%8F%E6%9B%BF%E4%BB%A3-mutation-%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B" rel=" nofollow noreferrer "> replace Mutation event types with constants-Vuex documents

in addition, the following is written in ES6 style " Computational attribute naming " 

export default {
  [RECEIVE_ADDRESS] (state, {address}) {
    state.address = address
  },

  [RECEIVE_USER_INFO] (state, {userInfo}) {
    state.userInfo = userInfo
  },
  [RESET_USER_INFO] (state) {
    state.userInfo = {}
  }
}

Previous: Springboot uses maven multi-environment deployment issues?

Next: Why is the style not displayed with ant design

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu