What are the five attributes of vuex

The five attributes of vuex are: 1. The state attribute is used to store variables; 2. The getters attribute is equivalent to the calculated attribute of state; 3. The mutations attribute is used to submit update data; 4. The actions attribute ;5. Modules attribute, used for modular vuex.

Recommended: "vue tutorial"

The five attributes and basic usage of vuex in vue

VueX is a state management framework specially designed for Vue.js applications. It uniformly manages and maintains the changeable state of each vue component (you can understand it as some data in the vue component).

Vuex has five core concepts:

state,getters,mutations,actions,modules.

1. state: basic data of vuex, used to store variables

2. geeter: data derived from basic data (state), equivalent to the calculated attributes of state

3. Mutation: The method to submit updated data must be synchronous (if you need to use action asynchronously). Each mutation has a string event type (type) and a callback function (handler).

The callback function is where we actually change the state, and it will accept state as the first parameter and submit the payload as the second parameter.

4. Action: The function is roughly the same as mutation. The difference is ==》1. Action submits a mutation instead of directly changing the state. 2. Action can contain any asynchronous operation.

5. Modules: Modular vuex allows each module to have its own state, mutation, action, and getters, making the structure very clear and easy to manage.

Usage of Vuex:

Create a new vue project testApp ==》Build a store file in testApp==》Under the store file there are modules folder and getter.js and index.js == 》Build user.js under the store file

Introduce it into the main.js of the project import store from './store'

Introduce it into the index.js under the store file

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store
　　在store文件下的getters.js中引入
const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}
export default getters
　　在modules文件下的user.js写代码
const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user

Use the following two methods to store data:

　　dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

The above is the detailed content of What are the five attributes of vuex. For more information, please follow other related articles on the PHP Chinese website!